Javascript Axios-更新导出的Axios.create实例上的标题

我有一个

api.js

，它默认导出一个

axios.create（）

实例：

import axios from 'axios'
import Cookies from 'js-cookie'

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${Cookies.get('Token')}`,
    Organization: Cookies.get('Organization'),
    Company: Cookies.get('Company')
  }
})

export default api

然后我将其导入多个文件，如下所示：

//api/users.js
import api from './api.js'

const methods = {
  postUser (params) {
    return api.post('/users', params)
  },
  getUser (id) {
    return api.get('/users/' + id)
  }
}

export default methods

---

但是，将有一些函数应该更新Cookies

组织

和

公司

，我想知道是否可以更新默认的

api

实例，并在使用它的所有导入中自动更新它。我知道一个简单的页面刷新就可以了，但我正在构建一个SPA，我想防止手动刷新屏幕。

您可以动态添加标题，这样每次请求都会读取cookies

import axios from 'axios'
import Cookies from 'js-cookie'

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
  // Static headers
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [function (data, headers) {
    // You may modify the headers object here
    headers['Authorization'] = `Bearer ${Cookies.get('Token')}`
    headers['Organization'] = Cookies.get('Organization')
    headers['Company'] = Cookies.get('Company')

    // Do not change data
    return data;
  }],
})

export default api

---

您可以动态添加标头，这样每次请求都会读取cookie

import axios from 'axios'
import Cookies from 'js-cookie'

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000,
  // Static headers
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [function (data, headers) {
    // You may modify the headers object here
    headers['Authorization'] = `Bearer ${Cookies.get('Token')}`
    headers['Organization'] = Cookies.get('Organization')
    headers['Company'] = Cookies.get('Company')

    // Do not change data
    return data;
  }],
})

export default api

---

我建议阅读有关axios拦截器的内容。（）

下面是一个非常基本的例子。 假设您的Web服务将返回一个响应http status 401头。 您可以使用以下命令截获响应：

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // happy case its 2XX
    return response;
  }, async (error) => {
    if (error.response.status === 401) {
        // do some logic to retrieve a new JWT or Cookie.get()
        const jwt = Cookies.get('Token');
        const config = error.config;
        config.headers['Authorization'] = `Bearer ${jwt}`;
    }
    
    return await axios.request(config);
});

---

然后，下一个请求将在请求头上附加一个授权头。

我建议阅读有关axios拦截器的内容。（）

下面是一个非常基本的例子。 假设您的Web服务将返回一个响应http status 401头。 您可以使用以下命令截获响应：

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // happy case its 2XX
    return response;
  }, async (error) => {
    if (error.response.status === 401) {
        // do some logic to retrieve a new JWT or Cookie.get()
        const jwt = Cookies.get('Token');
        const config = error.config;
        config.headers['Authorization'] = `Bearer ${jwt}`;
    }
    
    return await axios.request(config);
});

---

下一个请求将在请求头上附加一个授权头。

这就是我要找的！非常感谢你！这就是我要找的！非常感谢你！你好，我已经在用截取器做其他事情了，这真的很有用。我用@Michael2-answer解决了我的问题，使用

transformRequest

。谢谢你的帮助！你好，我已经在用截取器做其他事情了，这真的很有用。我用@Michael2-answer解决了我的问题，使用

transformRequest

。谢谢你的帮助！