API 调用在 ReactJS 中收到 CORS 错误，但在节点和邮递员中得到响应

Question

我正在尝试将API调用到安装在本地服务器中的流行服务器，如OwnCloud，Openfire和Ejabberd。我正在创建一个ReactJS网站。最初，我使用 fetch() 方法来访问 API。但是结果是我得到了CORS错误。

Access to fetch at 'http://x.x.x.x:8088/api/contacts/3000@x.x.x.x' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.

我使用 Postman 检查了相同的 API 并成功得到了响应。然后我使用命令行使用下面的节点代码对其进行了测试，并在命令行中获得了 API 响应。

var http = require("http");
var options = {
  "method": "GET",
  "hostname": "x.x.x.x",
  "port": "8088",
  "path": "/api/contacts/3000@x.x.x.x",
  "headers": {
    "cache-control": "no-cache",
    "postman-token": "e5a6f2bb-abc9-8ce7-f237-342ab53ab9d6"
  }
};
var req = http.request(options, function (res) {
  var chunks = [];
  res.on("data", function (chunk) {
    chunks.push(chunk);
  });
  res.on("end", function () {
    var body = Buffer.concat(chunks);
    console.log(body.toString());
  });
});
req.end();

我在 ReactJS 代码中实现了相同的节点代码，并再次收到相同的 CORS 错误。

我已将以下标头添加到fetch()方法的标头中，并收到相同的 CORS 错误。

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
'Access-Control-Allow-Headers': 'origin, content-type, accept, authorization',

我将mode: "cors"添加到fetch()方法中。但仍然是同样的错误。

您能否提供一种解决方案来避免此*CORS*问题？

Answer 1

您必须为 API 调用创建本地代理。

在这里，代理使用 url 模式与 api 调用匹配并将它们重定向到相应的服务器。

尝试以下操作：

• 安装 http 代理中间件

  npm install http-proxy-middleware --save
  

• 创建 src/setupProxy.js

  const proxy = require('http-proxy-middleware');
  module.exports = function(app) {
     app.use(proxy('/api', { target: 'http://localhost:8088/' }));
  };
  

• 然后运行本地开发服务器