来自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”）。 ..cut ...>。（原因：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浏览器发送的请求标头的值，Access-Control-Allow-Headers然后将其回显到服务器发送回的响应标头的值中。

否则，请使用一些现有的库来启用您的服务器的CORS。大多数CORS库通常都会将Access-Control-Request-Headers请求标头值与Access-Control-Allow-Headers响应标头值相呼应。