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

Posted 2023-02-27

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

【英文标题】：Missing token in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel

【发布时间】：2019-07-07 01:54:00

【问题描述】：

后端返回

Access-Control-Allow-Headers: *

我有一个类似的要求

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

它在 Chrome 中有效，但对于 Firefox，我得到了

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

【问题讨论】：

可能与此有关：***.com/questions/24371734/…

@Sirence 或这个：***.com/questions/52750589/…

重要提示：在响应凭证请求时，服务器必须指定域，并且不能使用通配符：developer.mozilla.org/en-US/docs/Web/HTTP/…

在下面的网址中观看我的回答：***.com/questions/56556415/…

【参考方案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 请求标头的值，然后将其回显到 @ 的值中987654334@ 服务器发回的响应标头。

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

【讨论】：

@zerkms 我更新了规范 URL 以引用 tc39.github.io/ecma262 位置，而不是现在已过时的 ecma-international.org/ecma-262/9.0 (ES2018) 位置。当前的 MDN 政策是始终使用 SpecName('ESDraft', …) 宏来引用 ES 规范（而不是使用 SpecName('ES2018', …) 或任何旧的 ES 规范版本）。如果您想讨论该政策，irc.mozilla.org 上的#mdn 频道是个好地方。或discourse.mozilla.org/c/mdn

@zerkms 是的，这有点像判断调用，但在 developer.mozilla.org/en-US/docs/Web/javascript 子树的特定情况下，调用是由指定维护者 Florian Scholz 发出的。他的电话就是我在这里提到的：规范对 ES6 规范的引用应该是所有 tc39.github.io/ecma262 版本。将规范 URL 添加到浏览器兼容性数据存储库时也会出现这种情况：github.com/mdn/browser-compat-data/pull/2983。为此，我们专门使用了tc39.github.io/ecma262 URL。