How to send a token with an AJAX request from jQuery
114,071
Solution 1
You can set the headers in a $.ajax request:
$.ajax({
url: "http://localhost:8080/login",
type: 'GET',
// Fetch the stored token from localStorage and set in the header
headers: {"Authorization": localStorage.getItem('token')}
});
Solution 2
If you are using JWT authentication then this is how you add it to the headers in .ajax() method:
headers: {
Authorization: 'Bearer '+token
}
,
Solution 3
I use the approach below to cover JWT authentication with the result status types
$.ajax({
url: "http://localhost:8080/login",
type: "POST",
headers: { Authorization: $`Bearer ${localStorage.getItem("token")}` },
data: formData,
error: function(err) {
switch (err.status) {
case "400":
// bad request
break;
case "401":
// unauthorized
break;
case "403":
// forbidden
break;
default:
//Something bad happened
break;
}
},
success: function(data) {
console.log("Success!");
}
});
Related videos on Youtube
![larz](https://i.stack.imgur.com/c42ZL.jpg?s=256&g=1)
Author by
larz
Updated on March 12, 2020Comments
-
larz over 4 years
I use express-jwt and create my token via jQuery and save it in my localStorage with:
$.ajax({ url: "http://localhost:8080/login", type: 'POST', data: formData, error : function(err) { console.log('Error!', err) }, success: function(data) { console.log('Success!') localStorage.setItem('token', data.id_token); } });
I have a protected route in my backend like:
app.get('/upload',jwt({secret: config.secret}), function(req, res) { res.sendFile(path.join(__dirname + '/upload.html')); });
How can I send the token from localStorage with the request header?
-
famas23 over 6 yearswhy you send token into headers? why not into data ??
-
Marcelo Agimóvel over 6 years@ahmedbhs I believe his trying to protect token somehow.
-
user326608 over 6 yearsfor a JWT header, this worked for me
headers: { "Authorization": 'Bearer ' + token }
-
larz over 4 yearsbut the question was how to send the saved token with the request. not how to save the token after the request.
-
TomTom over 4 yearsYou should be very careful when exposing your JWT token, in Javascript like a variable. Definitely don't expose it in frontend developer.okta.com/blog/2018/06/20/…