来自 CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌

Question

后端返回

Access-Control-Allow-Headers: *

我有一个类似的要求

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

它在 Chrome 中有效，但对于 Firefox，我得到了

跨域请求被阻止：同源策略不允许读取 <...cut...> 处的远程资源。 （原因：CORS 预检通道中的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“X-Auth”）。[了解更多] 跨域请求被阻止：同源策略不允许在 。 （原因：CORS 请求没有成功）

Answer 1

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

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

无需对所有标头名称进行硬编码即可实现此目的的一种方法是：让您的服务器端代码获取浏览器发送的 Access-Control-Request-Headers 请求标头的值，然后将其回显到 @ 的值中987654334@ 服务器发回的响应标头。

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