Javascript 使用Express Server CORS设置对JS进行反应

尽管有很多关于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端点是完全错误的。解决了这个问题

总结

---

如果你有我在问题中描述的这个设置，它应该可以正常工作。另外，我会选择@T.J.Crowder建议在side my NodeJS应用程序中使用的备用库。

问题可能是，您用

下一步链接到的后续路径没有意识到它们正在处理
选项
请求（飞行前）。对飞行前的响应应仅为标题

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

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()
  }
});

…前提是中间件优于其他中间件等

也就是说，您可能会考虑一个经过测试的中间件，而不是自己开发的。似乎很受欢迎。
问题很可能是您用
next
链接到的后续路线没有意识到它们正在处理
选项
请求（飞行前）。对飞行前的响应应仅为标题

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

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()
  }
});

…前提是中间件优于其他中间件等

也就是说，您可能会考虑一个经过测试的中间件，而不是自己开发的。似乎很受欢迎。
选项（飞行前）响应返回的状态是什么？（您可能需要Fiddler或类似工具才能找到答案。）
选项
（飞行前）响应返回的状态是什么？（您可能需要Fiddler或类似工具才能找到答案。）谢谢您的回答。您的第一点帮助我发现在ReactJS中调用的请求路径完全错误。第二，使用
cors
库将非常整洁+又是1！谢谢你的回答。您的第一点帮助我发现在ReactJS中调用的请求路径完全错误。第二，使用
cors
库将非常整洁+又是1！