来自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-allog-headers。值得注意的是，Firefox69和更早的版本没有。参见https://bugzilla.mozilla.org/show_bug.cgi？id=1309358。

因此，为了确保在所有浏览器中获得预期的行为，发回的access-control-allog-headers值应该显式地列出您实际需要从前端代码访问的所有头名称；例如，对于问题中的情况:access-control-allog-headers:x-auth。

一种无需硬编码所有头名称的方法是：让服务器端代码接受浏览器发送的access-control-request-headers请求头的值，并将其回显到服务器发送的access-control-allog-headers响应头的值中。

或者使用一些现有的库来启用服务器。将access-control-request-headersrequest-headers值回显到access-control-allog-headersresponse-header值是大多数CORS库通常为您做的事情。