无法在 VueJS 中使用 axios 在标头中设置授权和令牌答案

【问题标题】：Can't set authorization and token in headers with axios in VueJS无法在 VueJS 中使用 axios 在标头中设置授权和令牌
【发布时间】：2023-04-08 14:32:01
【问题描述】：

我正在尝试在 VueJS 客户端和 PHP API（使用 Zend 和 firebase）上设置 JWT 令牌身份验证。我设法通过创建存储在 LocalStorage 中的 JWT 令牌来登录用户。现在我想将此令牌发送回 API（以便 API 解码 JWT 并返回相关信息）。我尝试使用 axios 在 VueJS 的标头中设置“授权：承载 + 令牌”，但我总是遇到问题。这是一个代码 sn-p ：

function getInfos() {
  return axios({
    method: 'get',
    url: MYURL,
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('user')
    }
  })
    .catch(handleResponse)

}

首先我得到了这个错误：

Access to XMLHttpRequest at 'MYURL' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

然后，当我想要在我的 PHP API 中使用标头时，我没有任何授权：


header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: *');

$request = new Request();

我知道我可能必须使用 axios.defaults.headers.post 或者 axios.interceptors 但我是初学者所以我不知道如何正确使用它..

我希望有人能帮助我！谢谢

【问题讨论】：

标签： vue.js header jwt axios authorization

【解决方案1】：

我认为 * 在设置自定义标题时不起作用，您必须输入 header('Access-Control-Allow-Headers: Authorization') 至少这是我遇到的问题

【讨论】：