时间戳

首页 > 解决方案 > 来自 CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌

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

问题描述

后端退货

Access-Control-Allow-Headers: *

我有一个请求

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

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

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

标签： javascriptcors

解决方案

问题是，一些浏览器还不允许*. 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浏览器发送的请求标头的值，然后将其回显到Access-Control-Allow-Headers服务器发回的响应标头的值中。

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

推荐阅读