Reactjs 预检请求错误

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

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

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