Question

我正在尝试对本地服务器中安装的流行服务器（如OwnCloud，Openfire和Ejabberd）调用API。我正在创建一个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-proxy-middleware

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/' }));

};

然后运行您的本地Dev服务器

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

1 个答案: