将 Fetch 与授权标头和 CORS 一起使用

Posted 2023-03-04

【中文标题】将 Fetch 与授权标头和 CORS 一起使用

【英文标题】：Using Fetch with Authorization Header and CORS

【发布时间】：2018-10-02 16:17:47

【问题描述】：

我正在尝试让我的请求通过我似乎无法正常工作的在线游戏 API。我正在使用 Fetch API，有些请求需要 Authorization Bearer token，但请求永远不会与授权标头一起发送。

我试过了

mode: 'no-cors',
credentials: 'include'

显然将授权放在标题中

header:  'Authorization': 'Bearer TOKEN' 

但是请求仍然没有得到授权。谁能指出我正确的方向？

编辑 这是我提出请求的方式

fetch(URL, 
  credentials: 'include',
  header: 
    'Authorization': 'Bearer TOKEN'
  
)

【问题讨论】：

你真的有这个 API 的令牌吗？请显示您提出的确切请求以及您得到的响应。当然，您应该隐藏您的 API 密钥/令牌...

我刚刚更新了@MattMorgan 的帖子。根据我是否使用 cors，我会得到 2 个不同的响应。如果我使用模式：'no-cors'，那么授权永远不会在标题中发送......如果我使用模式：'cors'（模式默认为'cors'）然后预检请求被发送并响应页面不可用

能否提供 API 的实际 URL，或者 URL 本身是私有的？

它不是私人的，但不认为它很重要。它的api.guildwars2.com/v2/characters

【参考方案1】：

键名应该是 headers，而不是 header。

fetch(URL, 
  credentials: 'include',
  headers: 
    'Authorization': 'Bearer TOKEN'
  
)

【讨论】：

天哪，我只花了 2 个小时来找出我的请求不起作用的原因

【参考方案2】：

阅读documentation

可以通过查询参数或 HTTP 标头传递密钥。激战 API 服务器不支持预检 CORS 请求，所以如果您的 应用程序正在用户的浏览器中运行，您需要使用 查询参数。

要通过查询参数传递，请在您的 请求。