CODEWITHSUNDEEP
javascriptnode.jsapivue.jsaxios
Gustavo Dias
Gustavo Dias

Reputation: 135

Axios not passing headers on requests

I'm building a VueJS application and I'm using JSON web tokens as my auth system. When I log the user, I store the token with localStorage and works fine. I check the headers and it's in the 'Authorization' param.

I pass with axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')

I see the headers and it's okay. But when I execute a get request to an protected route in my API, return 'unauthorized'. But when I pass the header with token manually in the request, works fine.

Somebody know how to pass the header automatically when executing some request?

Upvotes: 6

Views: 26341

Answers (5)

mihaa123
mihaa123

Reputation: 1338

For me issue was with capital Headers vs headers. Should be lower case. My IDE got me the wrong autocomplete (i.e. with capital H)

This works:

await axios.get(url, {
    headers: { 'x-custom-header': 'super header value' }
});

This doesn't!

await axios.get(url, {
    Headers: { 'x-custom-header': 'super header value' }
});

Upvotes: 1

JillAndMe
JillAndMe

Reputation: 4571

  1. Check whether server get token from header of "Authorization"

  2. axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')

  3. if No. 2 works, then you may want to execute apis even if web is refreshed, then follow: 

axios.interceptors.request.use(function (config) {
  const token = 'Bearer ' + localStorage.getItem('token');
  config.headers.Authorization = `Bearer ${token}`;

  return config;
});

Upvotes: 2

Ismael Soschinski
Ismael Soschinski

Reputation: 475

interceptor which includes your auth token in every request as an Authorization header:

axios.interceptors.request.use(
 function(config) {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
 },
 function(error) {
  return Promise.reject(error)
 }
)

you could place it in the main file, for example main.js

Upvotes: 1

Yeray Diaz
Yeray Diaz

Reputation: 1770

You can use axios.create to create a new axios instance with a config object, including the headers. The configuration will be used for each subsequent calls you make using that instance.

Something like this worked for me:

var App = Vue.component('app', {
  mounted () {
    this.response = null
    this.axiosInstance = axios.create({
      baseURL: 'http://localhost:5000/',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      }
    })
  },
  data () {
    return {
      response: this.response,
    }
  },
  methods: {
    login () {
      this.axiosInstance.post('login', {username: 'test', password: 'test'})
        .then(resp => {
          this.accessToken = resp.data.access_token
          this.axiosInstance.defaults.headers['Authorization'] = 'Bearer ' + this.accessToken
        })
        .catch(err => this.response = err.response.status + ' ' + err.response.statusText)
    },
    protected () {
      this.axiosInstance.get('protected')
        .then(resp => this.response = resp.data)
        .catch(err => this.response = err.response.status + ' ' + err.response.statusText)
    }
  },
  template: '<div><button @click="login">Connect</button><button @click="protected">Protected</button></div>'
})

Upvotes: 4

Kartik Garasia
Kartik Garasia

Reputation: 1454

try this..

//in get request
const auth = {
        headers: {Authorization:'JWT ' + localStorage.getItem('token')} 
    }

axios.get('http://yourapi.com',auth).then(result => { 
 console.log(result.data)
})

//in post request
const auth = {
        headers: {Authorization:'JWT ' + localStorage.getItem('token')} 
    }
 //note:auth will be 3rd parameter in post request
axios.post('http://yourapi.com',{somekey:'some value'},auth).then(result => { 
 console.log(result.data)
})

Upvotes: 5

Related Questions