Reactjs Preflight请求错误

Question

我正在尝试使用基本身份验证在ReactJS上fetch一个API(这是一个复杂的请求(。

我偶然发现了很多文章，大多数都建议在node上修改一些内容，但在本例中，我没有使用任何节点服务器。我已经注释掉了所有的NodeJS代码，并且我直接从componentDidMount()获取这个API，显然，ReactJS有它自己的后端服务器。我暂时使用第三方cors-chrome插件，但我不喜欢使用Heroku或NGINX等第三方代理服务器或axios等第三方库。Cors chrome插件帮助我解决了access-control-allow-origin问题，但它随后提出了这个新问题。

Access to fetch at 'https://server-iam-fetching/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我尝试了一些方法，比如在头上附加访问控制检查，但似乎都不起作用。这是我的示例代码：

let headers = new Headers();
headers.append("Access-Control-Request-Headers", "*")
headers.append('Authorization','Basic ' + btoa(username + ":" + password));
credentials
allow requests
allow origins
..
..
etc
const someRequest = new Request(url, {
method: 'GET',
headers:headers,
mode:'cors',
cache: 'default'
});
componentDidMount(){
fetch(someRequest)
.then(response => response.json())
.then(json => console.log(json))
}

如有任何问题，欢迎发表评论。我在MacOS上。此外，我不想禁用我的chrome网络安全。

Answer 1

实际上，如果您可以访问API，您应该在NGINX配置或后端代码上修复它。但如果你没有访问权限，有两种推荐方式：

1. 通过node/express编写一个映射器代理API，并将所有调用发送到它，映射器API将其发送到主API。在映射器中，您可以访问允许所有来源：

   const express = require('express');
   const request = require('request');
   const app = express();
   app.use((req, res, next) => {
   res.header('Access-Control-Allow-Origin', '*');
   next();
   });
   app.get('/jokes/random', (req, res) => {
   request(
   { url: 'https://the-main-api-address' },
   (error, response, body) => {
   if (error || response.statusCode !== 200) {
   return res.status(500).json({ type: 'error', message: err.message });
   }
   res.json(JSON.parse(body));
   }
   )
   });
   const PORT = process.env.PORT || 3000;
   app.listen(PORT, () => console.log(`listening on ${PORT}`));
   

2. 如果你使用webpack-dev-server，你可以使用下面的配置来允许你的webpack devServer:上的所有来源

   devServer: {
   ...
   headers: {
   "Access-Control-Allow-Origin": "*",
   "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
   "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
   }
   }
   

   或者通过proxy:

   devServer: {
   contentBase: DIST_FOLDER,
   port: 8888,
   // Send API requests on localhost to API server get around CORS.
   proxy: {
   '/api': {
   target: {
   host: "0.0.0.0",
   protocol: 'http:',
   port: 8080
   },
   pathRewrite: {
   '^/api': ''
   }
   }
   }
   },
   

提示：我更喜欢使用第一个。

Answer 2

这篇文章只是为了您的开发模式，您可以启动一个没有安全模块的Google Chrome实例，它不会发送OPTION调用，而且您肯定不会看到CORS错误，所以打开您的终端并在其中写下以下命令：

open -n -a /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security