How to send a token with an AJAX request from jQuery

Question

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?

Anil Arrabole · Accepted Answer · 2024-05-31 19:49:55Z

90

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": "Bearer " + localStorage.getItem('token')}
});

edited May 31, 2024 at 19:49

Anil Arrabole

4,0166 gold badges37 silver badges54 bronze badges

answered Mar 8, 2016 at 14:37

gnerkus

12.2k7 gold badges54 silver badges76 bronze badges

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

4 Comments

famas23 Over a year ago

why you send token into headers? why not into data ??

Marcelo Agimóvel Over a year ago

@ahmedbhs I believe his trying to protect token somehow.

user326608 Over a year ago

for a JWT header, this worked for me headers: { "Authorization": 'Bearer ' + token }

TomTom Over a year ago

You 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/…

yogihosting · Accepted Answer · 2020-03-11 12:02:01Z

12

If you are using JWT authentication then this is how you add it to the headers in .ajax() method:

headers: {
    Authorization: 'Bearer '+token
}

,

answered Mar 11, 2020 at 12:02

yogihosting

6,3868 gold badges59 silver badges92 bronze badges

Comments

ilkerkaran · Accepted Answer · 2020-01-07 14:45:17Z

5

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

edited Jan 7, 2020 at 14:45

answered Jan 7, 2020 at 14:18

ilkerkaran

4,3923 gold badges31 silver badges45 bronze badges

1 Comment

larz Over a year ago

but the question was how to send the saved token with the request. not how to save the token after the request.

Aman · Accepted Answer · 2024-05-25 13:29:39Z

0

You can also do it like this.

     $.ajax({
        type: 'get', // or any other method you want
        dataType: 'json', 
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", "Bearer " + token);
        },
        url: `your-endpoint`,
        success: (data, status, xhr) => {
            if (data.status) {
               //Do something
            } else {
                console.warn("AJax failed");
            }
        },
        error: (xhr, textStatus, errorMessage) => {
            console.log(xhr.responseJSON.message);
        }
    });

edited May 25, 2024 at 13:29

answered Feb 23, 2024 at 12:00

Aman

116 bronze badges

Collectives™ on Stack Overflow

How to send a token with an AJAX request from jQuery

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related