使用 Vue.JS 和 Node.JS 时未定义 Axios 授权标头答案

【问题标题】：Axios Authorization headers undefined when using Vue.JS and Node.JS使用 Vue.JS 和 Node.JS 时未定义 Axios 授权标头
【发布时间】：2018-12-07 16:24:21
【问题描述】：

在我的 axios 实例中设置授权标头时遇到问题。

这是我在 http://localhost:8080 上运行的 Vue.JS 应用程序中的代码：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token

axios.get(`/users/email/${myemail}`).then(response => {
   var user = response.data.result[0]
   ...
});

这是我在 http://localhost:3000 上运行的 Node.JS 服务器代码示例：

// Add headers
app.use((req, res, next) => {  
  res.setHeader('Access-Control-Allow-Origin', '*');

  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  res.setHeader('Access-Control-Allow-Headers', 'Content-type, Accept, X-Access-Token, X-Key, Authorization');

  res.setHeader('Access-Control-Allow-Credentials', true);

  next();
});

还有：

app.use((req, res, next) => {
  var token = req.headers['authorization'];
  if (token) {
    jwt.verify(token, "mysecret", (err, decod) => {
      if (err) {
        res.status(403).send({message: "Access forbidden, wrong token."});
      } else {
        req.decoded = decod;
        next();
      }
    });
  } else {
    res.status(403).send({message: "Access forbidden, no token provided."});
  }
});

req.headers['authorization'] 始终未定义...但是当我通过 Postman 执行 get 请求时，Authorization 标头已正确设置，我可以在我的 Node.JS 服务器上获取令牌。

我不明白我的错误在哪里...非常感谢您的帮助！

【问题讨论】：

你在授权之前运行你的 cors 中间件，是吗？并且两者之间没有代理请求？（因为这在 webpack-devserver 等中相当流行）我们应该知道的任何其他中间件？你确定令牌在你设置它时存在吗？（也许在某些异步上下文之外？）您是否检查过 devtools 网络选项卡中的传出请求并且标头在那里？
我使用的默认"Access-Control-Allow-Headers" 是"Origin, X-Requested-With, Content-Type, Accept" 最值得注意的是，您缺少“Origin”。我尽量不要推测太多，但我会尝试至少添加一个。
我使用了您的 Access-Control-Allow-Headers，但我仍然遇到同样的问题，在服务器端，授权令牌仍未定义。我在请求之前和之后记录了令牌，并且设置正确。我不明白，因为当我使用 Postman 发送请求时，授权令牌存在。
因为 cors 只存在于浏览器中。邮递员不在乎cors。
好的，我知道了，谢谢你的帮助。这是服务器端的 CORS 问题（我的 API 上的预检）。所以我只是在 express 中添加了 cors lib，现在一切正常！

标签： javascript node.js vue.js axios

【解决方案1】：

您的 axios 标头键是“授权”，但在节点中您获得的是“授权”。

javascript 对象键区分大小写 :D

【讨论】：

感谢您的回答！但是通过设置 `axios.defaults.headers.common['authorization'] = 'Bearer' + token`` 和（在我的 Node.JS 服务器端） var token = req.headers['authorization'] 我的令牌仍然未定义... :(