发送带有授权标头的 axios get 请求答案

【问题标题】：Sending axios get request with authorization header发送带有授权标头的 axios get 请求
【发布时间】：2017-07-26 02:07:34
【问题描述】：

我尝试使用 vue.js 发送 axios get 请求，当不需要发送标头时它工作得很好。但是，当需要发送授权 jwt 时，我收到了 CORS 错误：“对预检请求的响应未通过访问控制检查：请求的资源上不存在‘Access-Control-Allow-Origin’标头。”我不知道为什么会出现这个问题，因为响应中有 Access-Control-Allow-Origin: '*' 标头。我的代码如下：

axios.get(url, {
  headers: {
    'Authorization': 'Bearer TOKEN'
  }
})
.then(function (response) {
  console.log(response.data)
})

最奇怪的是，当我在标头上使用 querystring.stringify 或 JSON.stringify 时，我没有收到错误 403（禁止），而只是收到错误 401 - Unauthorized。我尝试了变量和令牌本身，但没有成功。

我尝试发送一个发布请求以获取包含所需数据的 Web 令牌 - 用户名和密码，并且成功了。我能够得到令牌。

过去两天我对此进行了大量研究，我发现了不同类型的请求结构和配置，我尝试了所有这些，但没有一个是有效的。有没有办法检查请求是否与标头一起发送？还有什么问题吗？如果有人可以提供帮助，我将不胜感激。谢谢。

【问题讨论】：

您是否尝试过“Access-Control-Allow-Origin: *”（去掉 * 周围的单引号）而不是“Access-Control-Allow-Origin: '*'”？
您还应该检查您是否启用了“withCredentials”，您可以在axios doc 中找到此选项。此值允许在跨站点请求中发送授权标头，您还应确保您的 Web 服务器发回“Access-Control-Allow-Credentials：true”。

标签： vue.js axios

【解决方案1】：

我认为您应该将此代码添加到bootstrap.js（或定义axios的位置）：

window.axios = require('axios'); // I think its already added

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

您没有提到，但我猜您使用 laravel 或其他框架，保护免受 csrf 攻击，这就是您需要将生成的令牌添加到您的 ajax 请求标头的原因。

【讨论】：