javascript - CORS 预检 channel 中的 CORS header ‘Access-Control-Allow-Headers’ 中缺少 token

Question

后端返回

Access-Control-Allow-Headers: *

我有一个像

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

它适用于 Chrome，但对于 Firefox，我得到了

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)

Answer 1

问题是，有些浏览器还不允许 * Access-Control-Allow-Headers 的通配符.值得注意的是，Firefox 69 及更早版本没有。见 https://bugzilla.mozilla.org/show_bug.cgi?id=1309358 .

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

无需对所有 header 名称进行硬编码即可实现这一点的一种方法是:让您的服务器端代码采用 Access-Control-Request-Headers 的值。浏览器发送的请求头，并将其回显到 Access-Control-Allow-Headers 的值中您的服务器发回的响应 header 。

或者使用一些现有的库来启用您的服务器的 CORS。呼应Access-Control-Request-Headers request-header 值放入 Access-Control-Allow-Headers response-header 值是大多数 CORS 库通常会为您做的事情。