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

您可以使用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

Answer 2

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

Answer 3

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

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

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

3 个答案: