[FIXED] Axios JWT doesn't send

Issue

I have a project divided in two layers. The back-end is developed in spring boot, secured by Sprint security and JWT, and the front-end is developed in Vue.js, using Axios library for communication between layers.

I receive the "Bearer token" authentication properly, and all the authentication process is done correctly. The issue appears when I try to send a request with a token header to access content but the token doesn't send, and the Spring boot returns null without the content.

Here is the code

getOffers: function () {
    if (localStorage.getItem("userSession")) {
      this.aux = JSON.parse(localStorage.getItem("userSession"));
      this.token = this.aux.token;
      this.tokenHeader = "Bearer "+this.token;
      alert(this.tokenHeader)
    };
    console.log(`Bearer ${this.token}`)
    axios.
    get('http://localhost:8080/api/v1/offer', {'Authorization' : `Bearer ${this.token}`})
            .then(response => {
              console.log(response);
              this.offers = response.data
            }).catch(e => console.log(e))
  }

P.S: When I make a request in Postman, it works fine and returns the desired object. Here is a postman example: postman

Solution

Correct way to pass header is :

axios.get(uri, { headers: { "header1": "value1", "header2": "value2" } })

In your case try this:

axios.get('http://localhost:8080/api/v1/offer', { headers:{Authorization : `Bearer ${this.token}`} })

Also, check in console if this gives correct Bearer token:

console.log(`Bearer ${this.token}`)

Answered By - Hemant