带有 Express Server CORS 设置的 ReactJS

Question

尽管对 CORS 问题提出了很多问题，但没有一个对我有帮助。首先，我了解 CORS 是什么以及为什么它很重要。我不想禁用 CORS。我想正确使用它。我有一个 ReactJS 应用程序在http://localhost:3000. 此外，我的后端 NodeJS 应用程序运行在http://localhost:1234.我已经从我的 NodeJS 应用程序中启用了 CORS，如下所示：app.use(function(req, res, next) {  res.header("Access-Control-Allow-Origin", "http://localhost:3000") // update to match the domain you will make the request from  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")  next()});这是我的请求在 ReactJS 应用程序中的样子：axios    .post(this.props.endPoint, formData)    .then(res => {        console.log("Successfull");        this.setState({            loginOk: true        });    })    .catch(err => {        console.log(err);    });这是登录页面。当我提交请求时，我在浏览器控制台中看到以下错误。Access to XMLHttpRequest at 'http://localhost:1234/login' 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.更新我发现我调用的 REST 端点是完全错误的。修复它解决了这个问题。概括如果您有我在问题中描述的这种设置，它应该可以正常工作。另外，我会选择 @TJ Crowder 建议在我的 NodeJS 应用程序中使用的备用库。

Answer 1

问题可能是您链接到的后续路由next没有意识到它们正在处理OPTIONS请求（预检）。对预检的响应应该只是标题。

如果是这样，您可以像这样修复它：

app.use(function(req, res, next) {

  res.header("Access-Control-Allow-Origin", "http://localhost:3000") // update to match the domain you will make the request from

  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")

  if (req.method === "OPTIONS") {

    res.status(200).end();

  } else {

    next()

  }

});

...前提是中间件优先于其他中间件，等等。

也就是说，您可能会查看一个久经考验的中间件，而不是自己动手做。cors似乎很受欢迎。