为什么 axios 从授权标头中删除“Bearer”字符串？答案

【问题标题】：Why axios remove "Bearer" string from authorization header?为什么 axios 从授权标头中删除“Bearer”字符串？
【发布时间】：2022-01-15 18:16:10
【问题描述】：

我在使用 Bearer 令牌时遇到了 axios 和 GET 请求的问题。这是我的代码：

      const response = await axios.post("/auth/login", {
        ...form
      });

      const token = response["token"];
      if (token) {
        localStorage.setItem("session", token);

        console.log(token); //a234o2i3nr203fn20jef0293...
        const tokenHeader = {
          authorization: `Bearer ${token}`
        }

        const projects = await axios.get('/projects', { headers: { "authorization": `Bearer ${token}`}});
        console.log(projects); //UNAUTHORIZED

      }

登录帐户后，我想立即获取有关项目的数据，因此我使用 axios 并尝试使用带有授权标头的axios.get。但是，由于我不知道的原因，我的服务器部分请求已交付，但在我的token 之前没有Bearer 字符串，我的服务器在此请求上有这个：

headers: {
    authorization: "a234o2i3nr203fn20jef0293..." //axios remove `Bearer` string?
}

因此，我无法返回任何值，因为我的服务器未经授权返回给我，原因如下：

    const token = authHeaders && authHeaders.split(" ")[1];

返回 null 而不是 token。

谁能告诉我这个 axios 请求有什么问题？

感谢您的帮助！

【问题讨论】：

令人困惑的是你有 token 标头并以不同的方式传递标头
您是否检查过浏览器开发者控制台中的网络选项卡以确认这一点？
你应该检查浏览器，这样你就知道 axios 是否这样做了。在服务器端，这样你就知道服务器是否这样做了。
你为什么不使用tokenHeader？
@DanielA.White 也让我有点失望，但我不相信 const tokenHeader 正在被使用。

标签： javascript reactjs typescript axios

【解决方案1】：

尝试写“授权”而不是“授权”。我以前也遇到过这种问题。

const projects = await axios.get('/projects', { headers: { "Authorization": `Bearer ${token}`}});

【讨论】：