javascript - Axios interceptor token header is present in config but not in request headers - Stack Overflow

admin管理员组

文章数量:1315778

I've created axios interceptor which is responsible for adding token before every request is send to my rest API.

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            console.log(config);
            return config;
        } else {
            console.log('There is not token yet...');
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
}

As you can see in line 2 I'm importing vuex storage and this is actually place where my token is deposited. In line 8 I'm actually adding this token to config object and then in next line I'm consoling it out.

It is executed in my main.js file like so:

import interceptor from './helpers/httpInterceptor.js';
interceptor();

The token is present in config object which I see in my console (because i consoled config object):

It runs every time that I make some request to rest API as expected. If token exist (after login) it should add token header to every request. Unfortunately it doesn't add it although it is present on config object which makes me a bit confused.

It doesn't actually add token to real request as I can see in network tab:

This screenshot is of course taken after login so the token is already in vuex storage and it consoled out config (part of interceptor) after I executed logout function (which call rest API).

In result I have 400 (Bad request) status in response from my rest API because I didn't sent token.

EDIT!!!

I was thinking what can I add to this question to make it better. I think that this is impossible to create demo plunker so I decided to create little repository demo which you can download and see issue for your eyes. I hope it'll help to solve the problem!

I've created axios interceptor which is responsible for adding token before every request is send to my rest API.

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            console.log(config);
            return config;
        } else {
            console.log('There is not token yet...');
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
}

As you can see in line 2 I'm importing vuex storage and this is actually place where my token is deposited. In line 8 I'm actually adding this token to config object and then in next line I'm consoling it out.

It is executed in my main.js file like so:

import interceptor from './helpers/httpInterceptor.js';
interceptor();

The token is present in config object which I see in my console (because i consoled config object):

It runs every time that I make some request to rest API as expected. If token exist (after login) it should add token header to every request. Unfortunately it doesn't add it although it is present on config object which makes me a bit confused.

It doesn't actually add token to real request as I can see in network tab:

This screenshot is of course taken after login so the token is already in vuex storage and it consoled out config (part of interceptor) after I executed logout function (which call rest API).

In result I have 400 (Bad request) status in response from my rest API because I didn't sent token.

EDIT!!!

I was thinking what can I add to this question to make it better. I think that this is impossible to create demo plunker so I decided to create little repository demo which you can download and see issue for your eyes. I hope it'll help to solve the problem!

• javascript
• http
• vuejs2
• axios
• interceptor

Share Improve this question Follow edited Dec 31, 2017 at 15:18 BT101 asked Dec 27, 2017 at 13:38 BT101BT101 3,8361111 gold badges4848 silver badges101101 bronze badges 3

• Should I add information on how I am storing token to vuex storage? I don't know if it could be relevant to my issue. – BT101 Commented Dec 29, 2017 at 15:56
• Can you hard code the token and see if it works? – Tarun Lalwani Commented Dec 29, 2017 at 20:39
• Unfortunately it didn't change anything it still have same behaviour when I hard code token in interceptor. – BT101 Commented Dec 30, 2017 at 2:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I figured it out.

I didn't know that there is something called preflight request which is executed before real request to rest API. If preflight request fail it will not accept/receive more headers. This is why I didn't see it on real request in chrome console network tab but it was in config object which was console.loged in interceptor.

Same in repository demo which was calling not existing URL so preflight request failed there as well. While creating this demo I had no idea that such thing as preflight request exist so I was sure that it doesn't matter if I'll call some existing URL endpoint or fictitious one, I thought that in both way I should be able to see request header there.

You could also manipulate the response to cleanup token when expired.

  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    if (401 === error.response.status) {
      console.log("Session Expired")
      //window.location = '/login'
    } else {
      return Promise.reject(error);
    }
  });

本文标签： javascriptAxios interceptor token header is present in config but not in request headersStack Overflow