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

并非所有浏览器都支持*的{{1}}通配符。尤其是Firefox没有。参见https://bugzilla.mozilla.org/show_bug.cgi?id=1309358。

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

一种无需硬编码所有标头名称即可实现的方法是：让服务器端代码采用浏览器发送的Access-Control-Allow-Headers: X-Auth请求标头的值，然后将其回显为服务器发回的Access-Control-Request-Headers响应标头。

或者使用其他现有库来启用CORS服务器。大多数CORS库通常会将Access-Control-Allow-Headers请求标头值添加到Access-Control-Request-Headers响应标头值中。

Firefox的CORS检查失败，但Chrome则通过

1 个答案: