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

Posted 2023-03-04

【中文标题】API调用在ReactJS中得到CORS错误，但在节点和邮递员中得到响应

【英文标题】：API call getting CORS error in ReactJS but getting response in node and postman

【发布时间】：2019-06-12 08:54:22

【问题描述】：

我正在尝试调用安装在本地服务器中的流行服务器（如 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',

我在 fetch() 方法中添加了 mode: "cors"。但还是同样的错误。

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

【问题讨论】：

也许这个解决方案适合你。 ***.com/questions/25727306/…

【参考方案1】：

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

这里，proxy 使用 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/' ));

;

然后运行本地开发服务器

【讨论】：

此代码是否与 ReactJS 代码集成？如果没有，服务器不具备编辑代码的功能。

以上代码创建了一个本地代理，将 API 调用从一个端口（localhost:3030）转发到另一个端口（localhost:8088）。