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

Question

I got a problem when settings authorization headers to my axios instance.

Here is the code in my Vue.JS app running on http://localhost:8080 :

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

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

And here is a sample of my Node.JS server code running on http://localhost:3000 :

// 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();
});

And :

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."});
  }
});

The req.headers['authorization'] is always undefined... But when I execute the get request via Postman, the Authorization header is properly set, and I can get the token on my Node.JS server.

I don't understand where is my mistake... Thank's a lot for your help !

Answer 1

Your axios header key is "Authorization", but in node you get with "authorization".

The javascript object key is case-sensitive :D