Axios not passing headers on requests

Question

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?

Yeray Diaz · Answer 1 · 2017-09-07T13:33:44.173

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>'
})

score 3 · Answer 2 · answered Sep 06 '17 at 21:31

3

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)
})

answered Sep 06 '17 at 21:31

Kartik Garasia

1,324
1
18
27

1

There is some way to set this globally to use with axios? – Gustavo Dias Sep 07 '17 at 19:11
https://stackoverflow.com/questions/43051291/attach-authorization-header-for-all-axios-requests?rq=1 might help – Yeray Diaz Sep 08 '17 at 09:56
you can use "vuex" which is central storage system take a look at this [link.](https://vuex.vuejs.org/en/intro.html) its pretty simple to use. "ps: i am also using " you can create getters as axios requests and you and access across all off your server side components – Kartik Garasia Sep 08 '17 at 19:43

JillAndMe · Answer 3 · 2020-05-27T09:48:26.823

Check whether server get token from header of "Authorization"
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
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;
});

score 1 · Answer 4 · answered Nov 27 '22 at 19:46

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' }
});

Ismael Soschinski · Answer 5 · 2018-11-27T23:19:08.007

0

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

edited Nov 27 '18 at 23:19

answered Nov 27 '18 at 23:08

Ismael Soschinski

467
3
7

Axios not passing headers on requests

5 Answers5