获取 API：无法使用 Chrome 对请求标头添加授权

Posted 2023-02-27

【中文标题】获取 API：无法使用 Chrome 对请求标头添加授权

【英文标题】：fetch API: Can't add Authorization on Request Header with Chrome

【发布时间】：2017-08-10 21:35:14

【问题描述】：

Chrome 版本：57.0.2987

实际上，在旧版 Chrome 中我也有这个问题。 我用我的访问令牌在请求标头上添加了Authorization，

fetch('https://example.com/endpoint', 
  method: 'GET',
  headers: 
    'Authorization': 'Bearer ' + accesstoken
    
)

我总是在 Chrome 的 Response Header 上看到 Access-Control-Allow-Headers:authorization 此外，我的 fetch 始终是 Request Method:OPTIONS（不显示 GET），那么 Status Code 在 Chrome 中是 200 OK

但如果我在 Firefox（版本 52.0.1）中运行相同的提取代码，一切都会很好。我可以在 Request Header 上正确添加Authorization。它不会在 Firefox 的 Response Header 上显示 Access-Control-Allow-Headers:authorization。它将在请求标头上显示Authorization: Bearer accesstoken。

服务器端已经为我的请求头处理了 CORS..

这是 Chrome 错误还是我的代码错误？我应该如何在 Chrome 中正确设置 Request Header 上的Authorization？

下图是 Chrome 开发工具中的详细 Network：

下图是 Firefox 开发工具中的详细 Network：

【问题讨论】：

正如我在github.com/whatwg/fetch/issues/509 中告诉您的，您确实需要分享更多信息。这还不足以弄清楚发生了什么。

@Anne 我已经在问题中发布了 Chrome 网络详细信息，有请求标头和响应标头。我希望它有用。你有什么线索吗？

我的意思是，这看起来不错，所以它可能是别的东西。控制台说什么？ fetch() 方法是否拒绝？

@Anne 控制台什么也没说。 fetch() 没有拒绝。但它无法在请求标头上正确设置Authorization，它只是在 CORS 预检步骤中停止。我还在 Firefox 中发布了网络。它可以完成 CORS 预检，然后到 GET 方法，在 Request Header 上正确设置Authorization。

那我不确定。您可能需要针对 Chrome 提交错误。不使用 localhost 可以重现吗？

【参考方案1】：

正如@stackdave 所说，跨域ajax 时，浏览器在GET 请求之前发送OPTIONS 请求。然后浏览器将等待服务器响应。我的情况是服务器没有响应，所以浏览器只是停止 OPTIONS 状态。服务器需要处理这个问题，仍然是 CORS 问题，而不是 fetch api bug 或问题。

【参考方案2】：

浏览器将在 OPTIONS 请求之前发送，没有授权令牌，然后将发送真正的请求

http://www.w3.org/TR/cors/ 更多信息请参见http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/