Set axios header with react

Question

I'm trying to access http://localhost:8080/api/v1/postulant, but I cannot set the access token in the headers. I do the same request on Postman and it works so it's a problem in the Axios request, what did I do wrong?

let headers = {
  Authorization:
    "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjUsImlhdCI6MTYxOTUyNDE4NywiZXhwIjoxNjIwMTI4OTg3fQ.hSXARB-y7rClswYZ380HV5RW77qjYNt5FzW2NfDd8Vw",
  "Content-Type": "application/json",
};
axios.get("http://localhost:8080/api/v1/postulant", { headers });

on the api I have this code to control the token:

function Auth(req, res, next) {
  console.log(req.headers);
  if (!req.headers["authorization"])
    res.status(400).json({ message: "token invalid" });
}

and it gives me that for my console log req.header: command prompt result

with my postman request, I have this result : enter image description here

so I didn't find the authorization that I provided in the Axios request

The `Content-Type` is different in both requests -- 'application/x-www-form-urlencoded' vs. 'application/json' — hugo, Apr 27 '21 at 15:29

score 0 · Answer 1 · answered Apr 27 '21 at 14:12

0

Your { headers } looks a bit like destructuring, so that might be the issue. Try

const options = {
  headers : {'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjUsImlhdCI6MTYxOTUyNDE4NywiZXhwIjoxNjIwMTI4OTg3fQ.hSXARB-y7rClswYZ380HV5RW77qjYNt5FzW2NfDd8Vw',
        'Content-Type': 'application/x-www-form-urlencoded',
    }
}

And then axios.get("http://localhost:8080/api/v1/postulant", options)

answered Apr 27 '21 at 14:12

StelKizi

90
1
11

1

The syntax they used is correct -- `{ header }` is a shortcut for `{ header: header }` – hugo Apr 27 '21 at 15:22
Ah ok I see. Thank you! – StelKizi Apr 27 '21 at 15:30

score 0 · Answer 2 · answered Apr 28 '21 at 07:27

0

Check the casing of your Authorization.

if(!req.headers['Authorization'])
    res.status(400).json({message : 'token invalid'});
}

answered Apr 28 '21 at 07:27

Ryan Garde

742
1
7
20

Ivan Bila · Answer 3 · 2021-04-28T23:34:05.850

HTTP headers are case-insensitive as discussed on this answer. However, the node object key is case-sensitive, so maybe there might be an issue with the brackets in the code itself

So this code

function Auth(req,res,next){
  console.log(req.headers)
}
if(!req.headers['authorization'])
    res.status(400).json({message : 'token invalide'});
}

is actually a function that has one instruction which is console.log(req.headers)

and then

if(!req.headers['authorization'])
    res.status(400).json({message : 'token invalide'});
}

which is not in the function scope so it cannot access the req.headers parameter. Here's how the code should look like:

function Auth(req, res, next) {
  console.log(req.headers);
  if (!req.headers["authorization"]) {
    res.status(400).json({ message: "token invalid" });
  }
}

score 0 · Answer 4 · answered Apr 29 '21 at 07:15

0

Hello i finally found the solution it was a cors problem.

so i have delete this part of my code

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "DELETE, GET, OPTIONS, PATCH, POST, PUT")
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,Authorization");
next();
});

and add this instead

const cors= require('cors')
app.use(cors())

answered Apr 29 '21 at 07:15

Raphy

7
5

So the issue was in the use of the web framework (I'm guessing Express?), not the request itself? If so, you can tag your question with Express.js or something relevant, so others can find it – hugo Apr 29 '21 at 08:47

Set axios header with react

4 Answers4