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

Question

我有一个 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)？

感谢您的任何想法！

Answer 1

据我了解，事情是这样的：

• 浏览器发出 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（以及凭据！）传送到 不同的 服务器。