node.js - API调用在ReactJS中得到CORS错误,但在节点和邮递员中得到响应
问题描述
我正在尝试向安装在我的本地服务器中的流行服务器(如 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*
问题吗?
解决方案
您必须为 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/' })); };
然后运行本地开发服务器
推荐阅读
- angular - node_modules/ang-jsoneditor/jsoneditor/jsoneditor.component.d.ts(13,9) 中的错误
- html - 字体真棒图标作为 html 链接
- .net-core - 使用 AspNetCoreRateLimit 时未获得状态代码 429 和自定义错误消息
- android - 带有 EncryptedSharedPreferences 的 AutoBackUp 无法恢复
- contiki - 具有简单 energest Contiki 的 Rpl-udp
- sql - 有没有办法在 ps catch 块中捕获确切的错误消息?
- javascript - 如何在Javascript中正确更改名称来调用函数?
- reactjs - 将 Storybook 与 Redux 一起使用
- mysql - 如何使用 uuid 值对表进行排序
- javascript - vba html表单填充(即或chrome)-onkeypress问题