带有 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似乎很受欢迎。