反应:API 302 重定向到同一域时出现 CORS 错误

React: CORS error when API 302 redirects to same domain

我有一个 React 网络应用程序 (a.com),它通过 axios/XHR 请求与 API (b.api) 通信。

现在有一个特定的请求,服务器通过 302 重定向到另一个 a.com 位置来响应。这失败并在 Chrome:

中出现 CORS 错误

Access to XMLHttpRequest at 'https://a.com/redirectpath' (redirected from 'https://b.api/requestpath') from origin 'https://a.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

与错误消息相反,触发重定向的预检请求似乎设置了 origin: null。这是问题吗?为什么会发生这种情况,如果重定向转到用户所在的同一域 (a.com)?

感谢您的任何想法!

据我了解,事情是这样的:

  • 浏览器发出 cross-origin 请求 Authorization header 到 b.api
  • Authorization header 需要预检请求,已成功。
  • 来自 b.api 的响应是 302 重定向到 a.com
  • 浏览器向 a.com 发出重定向请求,其中再次包含相同的 Authorization header。
  • 尽管此请求发往同一来源,但仍被视为 cross-origin,因为它是由来自不同来源的重定向触发的。
  • Authorization header 因此需要向 a.com 发送预检请求,其中 Origin: null.
  • 第二次预检请求不成功:a.com 没有 return Access-Control-Allow-Origin(也没有 Access-Control-Allow-Headers: Authorization)。

我认为问题在于 b.api 的行为:需要 Authorization header 的请求应该 而不是 导致 302响应,因为这会将 Authorization header(以及凭据!)传送到 不同的 服务器。