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

【问题标题】：Using Fetch with Authorization Header and CORS将 Fetch 与授权标头和 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】：

阅读documentation

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

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

【讨论】：