简短回答:确保您的代码中请求URL不缺少尾随斜杠。
缺少尾随斜杠是导致问题的最常见原因。
但这不是唯一的原因 - 只是最常见的原因。请继续阅读以获取更多详细信息。
当您看到此错误时,这意味着您的代码会触发浏览器发送CORS预检OPTIONS
请求,而服务器则响应一个3xx
重定向。为了避免出现该错误,您的请求需要获得一个2xx
成功响应。
您可能能够调整您的代码以避免触发浏览器发送OPTIONS
请求。
至于在这种情况下发生了什么,重要的是要知道,如果:
- 请求方法是除
GET
、HEAD
或POST
之外的任何其他方法
- 您设置了自定义请求头而不是
Accept
、Accept-Language
、Content-Language
、Content-Type
、DPR
、Downlink
、Save-Data
、Viewport-Width
或Width
Content-Type
请求头的值不是application/x-www-form-urlencoded
、multipart/form-data
或text/plain
如果您无法更改代码以避免浏览器需要进行预检,则可以选择:
- 检查响应中
OPTIONS
请求的Location
响应头中的URL。
- 更改您的代码,直接向该其他URL发出请求。
URL之间的区别可能只是路径中末尾斜杠这样简单的东西 - 例如,您可能需要更改代码中的URL以添加末尾斜杠,例如:
http://localhost/api/auth/login/
(注意末尾斜杠),而不是
http://localhost/api/auth/login
(没有末尾斜杠)- 或者您可能需要删除末尾斜杠。您可以使用浏览器开发工具中的网络选项卡来检查
OPTIONS
请求的响应,并在
Location
响应标头的值中找到重定向URL。
但是,在某些情况下,所有以下内容都是真实的:
- 您无法避免预检请求
OPTIONS
- 您无法对请求URL进行任何调整
- 您无法用完全不同的URL替换请求URL
具有这些条件的常见情况是,当您尝试使用某些第三方端点进行工作时,该端点需要OAuth或SSO工作流程,这些工作流程不适用于前端代码。
在这种情况下 - 实际上在所有情况下 - 必须认识到的关键是,对预检的响应必须来自与您的前端代码发送请求的同一起源。
因此,即使您创建了自己控制的服务器端代理:
1. 如果您的浏览器向代理发送预检
OPTIONS
请求。
2. 您已配置代理以将请求重定向到第三方端点。
3. 因此,您的前端最终直接从该第三方端点接收响应。
然后预检将失败。在这种情况下,您的唯一选择是:确保预检不仅被重定向到第三方端点,而且您自己的服务器端(代理)代码接收来自该端点的响应,使用它,然后向您的前端代码发送自己的响应。