带有授权标头的VueJs axios未经授权的POST请求答案

【问题标题】：VueJs axios unauthorized POST request with Authorization header带有授权标头的VueJs axios未经授权的POST请求
【发布时间】：2021-03-24 05:54:36
【问题描述】：

我想向我的 REST api 发送经过授权的 POST，但一直未获得授权。一切都在邮递员中工作，我在服务器上启用了 CORS。

      axios
    .post("/api/listings", {
      headers: {
        'Authorization': 'Bearer ' + this.token,

      }

标头似乎在 chrome 调试工具中请求有效负载。

我从 localStorage 获取令牌，它肯定在那里。

【问题讨论】：

当您检查您的网络选项卡以获取 API 请求时，请求标头中的授权设置是什么？对于 localStorage，你什么时候用令牌数据更新它？
有趣的是，在网络选项卡请求标头中，我看不到授权标头，它仅出现在有效负载中。至于令牌，我将其设置为单击假登录的按钮，然后从 api 获取令牌。

标签： vue.js axios

【解决方案1】：

我的问题是标头是作为请求正文中的对象而不是作为标头发送的。

使用此代码修复了问题：

      axios
    .request({
      url: "api/listings",
      method: "POST",
      headers: {
        Authorization: "Bearer " + this.token,
      },
      data:{
      ListingName: this.name
      }

    })
    .then((response) => {
      console.log(response);
    });
}

【讨论】：