1

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 !

6
  • And you run your cors middleware before the authorization, yes? And no proxy-ing requests in between? (since that's rather popular with webpack-devserver etc) Any other middleware we should know about? Are you sure the token exists when you set it vue? (Maybe outside some async context?) Have you inspected the outgoing request in your devtools networks-tab and the headers are there? Commented Jun 28, 2018 at 15:08
  • And the default "Access-Control-Allow-Headers" I use are "Origin, X-Requested-With, Content-Type, Accept" most notably, you are missing "Origin". I'm trying to not speculate too much, but I would try to add that one at least. Commented Jun 28, 2018 at 15:16
  • I use your Access-Control-Allow-Headers, but I still got the same issue, on the server side, the Authorization token is still undefined. I log the token before the request and after and it is properly set. I don't understand because when I use Postman to send my request, the Authorization token exists. Commented Jun 29, 2018 at 8:02
  • Because cors are only in browsers. Postman doesn't care about cors. Commented Jun 29, 2018 at 8:10
  • 1
    OK, I figured out, thank's for your help. It was a CORS issue in the server side (preflight on my API). So I just add cors lib in express, and everything is working fine now ! Commented Jun 29, 2018 at 10:32

1 Answer 1

3

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

The javascript object key is case-sensitive :D

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for your answer ! But by setting `axios.defaults.headers.common['authorization'] = 'Bearer ' + token`` and (in my Node.JS server side) var token = req.headers['authorization'] My token is still undefined... :(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.