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 请求 header 的值，并将其回显到您的服务器发回的 Access-Control-Allow-Headers 响应 header 的值中。

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