javascript - 全局修改axios默认 header 时出现问题 - Vue

Question

在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;

到目前为止一切正常。 (我能够成功登录并存储 token )

现在，我有另一个组件，它通过对组件的 created() 生命 Hook 执行的 ajax 调用从服务器获取用户列表。我的问题是，当我尝试访问组件中的 this.$http 时，我从服务器返回 401 错误响应，因为 Authorization header 对请求 header 不可用(虽然我已经预先配置了axios.defaults.headers.common)

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

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

Answer 1

您可以使用 axios 请求拦截器在全局添加您的 header

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 访问您当前的请求读取器，您可以将 header 设置为请求，如

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

https://github.com/axios/axios