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

Posted 2023-02-22

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

【英文标题】：Problem when modifying axios default headers globally - Vue

【发布时间】：2019-05-24 15:04:14

【问题描述】：

在 ma​​in.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() lifehook 上执行的 ajax 调用从服务器获取用户列表。 我的问题是，当我尝试访问组件中的 this.$http 时，我从服务器返回 401 错误响应，因为 Authorization 标头对请求标头不可用（尽管我已经预先配置了 axios.defaults.headers。常见）

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

谁能解释一下为什么会这样？

【问题讨论】：

能贴出使用Axios的组件代码吗？

【参考方案1】：

您可以使用 axios 请求拦截器来全局添加您的标头

axios.interceptors.request.use(function (config) 
// Do something before request is sent
  return config;
, function (error) 
// Do something with request error
   return Promise.reject(error);
);

您可以使用 config.header 访问您当前的请求阅读器，并且可以将标头设置为请求，例如

config.headers = 
   'Authorization': 'JWT ' + Vue.auth.getToken()

https://github.com/axios/axios

【参考方案2】：

您可以创建一个类来全局添加您选择的标题。

import axios from 'axios';

/**
 * A wrapper around an axios instance, preconfigured to have a base URL and auth headers
 */
class Axios 
    constructor(baseUrl, bearerToken) 

        return axios.create(
            baseURL: baseUrl,
            headers: 
                Authorization: `Bearer $bearerToken`
            
        );
    


export default Axios;

然后在你的 app.js 中

import  Axios  from 'my/class'


const myService = new Axios('baseURL', 'bearerToken');

【讨论】：

能不能做一个export default new Axios('baseurl', 'token') 这样就可以直接使用而不用每次都声明了？

【参考方案3】：

您是否尝试过使用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

另外我使用了一个 store 动作来更新 axios 客户端：

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