全局修改axios默认标头时出现问题 - Vue

Question

在main.js中

import axios from 'axios';

axios.defaults.headers.common = {
    'Authorization': 'JWT ' + Vue.auth.getToken()
};

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //TODO: append the trailing slash

// Add modified axios instance to Vue prototype so that to be available globally via Vue instance
Vue.prototype.$http = axios;

到目前为止,一切正常.(我能够成功登录并存储令牌)

现在,我有另一个组件,通过在组件的created()生命周期上执行的ajax调用从服务器获取用户列表.我的问题是,当我尝试访问this.$http组件时,我从服务器返回401错误响应,因为Authorization标头不可用于请求标头(尽管我已经预先配置了axios.defaults.headers.common)

奇怪的是,如果我点击浏览器上的刷新按钮,则令牌会正确附加到请求标头,并且成功获取用户列表**.**

有谁能请向我解释为什么会发生这种情况？

Answer 1

您是否尝试过使用asios.create？

http/index.js:

import axios from 'axios'
import env from '../config/env'
import store from '../store'

export default (() =>
  axios.create({
    baseURL: env.API_HOST,
    headers: {
      common: {
        Authorization: store.getters['user/getAuthToken']
      }
    }
  }))()

main.js:

import http from './http'

Vue.prototype.$http = http

另外，我使用存储操作来更新 axios 客户端：

updateHTTPClientAuthToken () {
  Vue.prototype.$http.defaults.headers.common.Authorization = this.getters.getAuthToken
}