Firefox的CORS检查失败，但Chrome的检查失败 [英] CORS check fails for Firefox but passes for Chrome

问题描述

后端返回

Access-Control-Allow-Headers: *

我有一个请求

fetch('url-here', {
    // ...
    headers: {
        'X-Auth': token,
    }
})

它适用于Chrome但适用于Firefox我正在

It works in Chrome but for Firefox I'm getting

阻止跨源请求：同源策略不允许在< ... cut ...>处读取远程资源。 （原因：在CORS预检信道的CORS标题'Access-Control-Allow-Headers'中丢失令牌'X-Auth'）。[了解更多]跨源请求被阻止：同源策略不允许在< ... ...切>。 （原因：CORS请求未成功）

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: missing token ‘X-Auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: CORS request did not succeed)

推荐答案

并非所有浏览器都支持 * 通配符> Access-Control-Allow-Headers 。特别是，Firefox没有。请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=1309358。

Not all browsers have support yet for the * wildcard for Access-Control-Allow-Headers. In particular, Firefox doesn’t. See https://bugzilla.mozilla.org/show_bug.cgi?id=1309358.

因此，为了确保您在所有浏览器中获得预期的行为， Access-Control-Allow-Headers 您发回的值应明确列出您实际需要从前端代码访问的所有标题名称;例如，对于问题中的情况： Access-Control-Allow-Headers：X-Auth 。

So to ensure you get expected behavior in all browsers, the Access-Control-Allow-Headers value you send back should explicitly list all the header names you actually need to access from your frontend code; e.g., for the case in the question: Access-Control-Allow-Headers: X-Auth.

One你可以在不需要对所有标题名称进行硬编码的情况下实现这一点：让服务器端代码获取 Access-Control-Request-Headers 请求标头的值浏览器发送，并将其回显到服务器发回的 Access-Control-Allow-Headers 响应头的值。

One way you can make that happen without needing to hardcode all the header names is: Have your server-side code take the value of the Access-Control-Request-Headers request header the browser sends, and just echo that into the value of the Access-Control-Allow-Headers response header your server sends back.

或者使用一些现有的库来启用服务器CORS。将 Access-Control-Request-Headers 请求标头值回送到 Access-Control-Allow-Headers 响应中 - 标头值是大多数CORS库通常会为您做的事情。

Or else use some existing library to CORS-enable your server. Echoing the Access-Control-Request-Headers request-header value into the Access-Control-Allow-Headers response-header value is something most CORS libraries will typically do for you.

这篇关于Firefox的CORS检查失败，但Chrome的检查失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！