来自 Google Chrome 的 2 个请求而不是 1 个请求

Posted 2023-03-04

【中文标题】来自 Google Chrome 的 2 个请求而不是 1 个请求

【英文标题】：2 request instead of 1 from Google Chrome

【发布时间】：2018-08-07 08:42:25

【问题描述】：

我们正在使用 vue.js 和 Node.js (Express) 构建一个 SPA。 SPA 是从 1 个域下载的，而 REST api 在另一个域中。

问题是我注意到 Chrome 在对与下载网页的域不同的另一个域（CORS 请求）进行 ajax 调用时会执行 2 个请求而不是 1 个请求。

经过一些研究，我得出的结论是，这是一个功能，而不是错误。

那么，以优雅的方式解决这个问题的最佳方法应该是什么？

我目前丢弃了第一个状态为 200 响应的请求，但我认为这不是最好的方法。

【问题讨论】：

你读过这个吗？ ***.com/questions/4460661/…

是的，我有！谢谢你的回答。在尝试了该帖子所讨论的内容后，我已经发布了此问题...我可能还遗漏了其他内容...我也仔细看了看，以防我进行了 2 个 AJAX 调用而不是一个，但事实并非如此.我很确定这不是编程错误，因为我总是在 POST 的正文中附加一个 JWT，而加倍的请求没有。

第一个请求是OPTIONS 请求（而不是GET 或POST）？如果是这样，那很可能是CORS preflight request，浏览器使用它来确定是否允许发送实际请求。理想情况下，您的服务器应该只返回 CORS 标头来响应此问题。如果您的业务逻辑被调用两次，则说明您的服务器未正确实现 CORS。

这个样子肯定是了，谢谢。我对CORS了解不多，所以不知道如何处理。我确实使用适当的 res.header("Access-Control-Allow-Origin", "*"); 在服务器端处理它等等...是否可以避免第一个请求，因为我的 API 接受 CORS？

等一下，写一个答案。

【参考方案1】：

如果发送的第一个请求是 OPTIONS 请求，则很可能是 CORS pre-flight。浏览器使用它来询问服务器是否允许提交实际请求。

如果您的服务器正在运行业务逻辑以响应预飞行，则说明您没有正确实现 CORS - html5Rocks 提供了它应该如何实际工作的方便流程图：

这可能看起来有点压倒性 - 幸运的是，您不必担心这一点，因为已经有一个 official CORS middleware for Express 提供此功能等等。如果您将其插入，您应该能够从您的应用程序中删除所有显式的 res.header("Access-Control-Allow-Origin", "*") 内容。

【讨论】：

就是这样，乔。谢谢！你打字的时候我只是在看那个中间件。非常感谢