后端返回
Access-Control-Allow-Headers: *
我有一个请求
fetch('url-here', {
// ...
headers: {
'X-Auth': token,
}
})
它在 Chrome 中有效,但对于 Firefox,我得到了
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: missing token ‘X-Auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: CORS request did not succeed)
最佳答案
问题是,某些浏览器还不允许 *
通配符用于 Access-Control-Allow-Headers
。值得注意的是,Firefox 69 及更早版本没有。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=1309358 .
因此,为确保您在所有浏览器中获得预期的行为,您发送回的 Access-Control-Allow-Headers
值应明确列出您实际需要从前端代码访问的所有 header 名称;例如,对于问题中的情况:Access-Control-Allow-Headers: X-Auth
。
无需对所有 header 名称进行硬编码即可实现这一点的一种方法是:让服务器端代码采用浏览器发送的 Access-Control-Request-Headers
请求 header 的值,并将其回显到您的服务器发回的 Access-Control-Allow-Headers
响应 header 的值中。
或者使用一些现有的库来为您的服务器启用 CORS。将 Access-Control-Request-Headers
请求 header 值回显到 Access-Control-Allow-Headers
响应 header 值中是大多数 CORS 库通常会为您做的事情.
关于javascript - 来自 CORS 预检 channel 的 CORS header ‘Access-Control-Allow-Headers’ 中缺少 token ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54666673/