主页 / 问题 / 691567
Accepted
Илья Бизунов
Asked:2020-07-13 02:57:51 +0000 UTC2020-07-13 02:57:51 +0000 UTC

fetch - 无法执行简单查询

  • 772

localhost:3000 - 反应客户端

localhost:8080 - NodeJS 服务器

我编写了以下类来调用服务器 API 方法：

import React, { Component } from 'react';

class Server {
  static call(apiMethod, params = {}, httpMethod = 'POST') {
    return fetch('http://localhost:8080/' + apiMethod, {
      mode: 'no-cors',
      method: httpMethod,
      body: params
    });
  }
}

export default Server;

我正在尝试使用它：

process() {
  let method = this.state.mode;
  Server.call(method, {
    name: this.state.user,
    password: this.state.password
  }).then(function(response) {
    console.log(response);
  }).then(function(data) {
    console.log(data);
  });
}

在控制台中我得到：响应示例

我不明白这是什么问题？如何从服务器获得响应？

javascript

2 个回答

  1. Then回报Promise。当收到响应时，它会发送给第一个then带有response. 您已经response可以使用其中一种方法从中获取响应主体。

    response.arrayBuffer()
response.blob()
response.formData()
response.json()
response.text()

    这些方法还返回Promisea 将被处理成thenor catch。那些。该功能应该是这个样子

      Server.call(method, {
    name: this.state.user,
    password: this.state.password
  }).then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  });
    • 2
  2. Best Answer

    总的来说，我们设法弄清楚了。感谢@Sapphiron 的帮助。

    整个问题原来是 CORS 和服务器标头。为了让一切正常工作，我更正了服务器上的代码（NodeJS + Express），如下所示：

    app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type, X-Requested-With");
    next();
});

    以及客户端上的代码：

    class Server {
  static call(apiMethod, params = {}, httpMethod = 'POST') {
    return fetch('http://localhost:8080/' + apiMethod, {
      headers: {'Content-Type':'application/json'},
      mode: 'cors',
      method: httpMethod,
      body: JSON.stringify(params)
    }).then(function(response) {
      return response.json();
    });
  }
}

    现在一切正常 =)

    • 0

相关问题