如何在自定义请求中向 Axios 的全局实例添加额外的标头？答案

【问题标题】：How can I add an aditional header to global instance of Axios in a custom request?如何在自定义请求中向 Axios 的全局实例添加额外的标头？
【发布时间】：2021-11-12 08:57:48
【问题描述】：

这是我的全局 Axios

import axios from 'axios';
import { storage } from 'containers/login/utils/local-storage';

const token = storage.getToken();

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
});

    axiosInstance.interceptors.response.use((response) => {
  response.config.headers = {
    Authorization: `Bearer ${token}`,
  };

  return response;
}, (error) => Promise.reject(error));

axiosInstance.interceptors.request.use((request) => {
  request.headers = {
    Authorization: `Bearer ${token}`,
  };

  return request;
}, (error) => Promise.reject(error));

export default axiosInstance;

在这个请求中我需要添加新的标头：invoiceLimit = `${-invoiceLimit}`

export const updateInvoiceLimit = async (
  invoiceLimit: string,
)
  : Promise<ReturnDataType> => {
  let result: ReturnDataType = {} as ReturnDataType;

  try {
    axios.defaults.headers.common.invoiceLimit = `${-invoiceLimit}`;
    result = await axios.put(`${CREDITS_URL.CREDITS}/invoice/limit`);
   
    return result;
  } catch (error) {
    SnackBarUtils.error(`${(error as Error).message}. ${result.data.message}`);
  }

  return result;
};

当我使用这个时：axios.defaults.headers.common.invoiceLimit = `${-invoiceLimit}`;

header 添加到 Axios 默认值中，但是当我调用 axios.put 时，这个自定义标头消失了，只留下了拦截器的全局标头。

我知道这不是最佳实践，但它的客户 API 和我不想创建另一个 Axios 实例，而是使用一个全局实例。

【问题讨论】：

标签： javascript axios

【解决方案1】：

我认为问题出在这里：

axiosInstance.interceptors.request.use((request) => {
  request.headers = {
    Authorization: `Bearer ${token}`,
  };

  return request;
}, (error) => Promise.reject(error));

您正在用这个覆盖所有请求标头：

{ Authorization: `Bearer ${token}` }

所以在添加新标题之前尝试传播标题：

axiosInstance.interceptors.request.use((request) => {
  request.headers = {
    ...request.headers,
    Authorization: `Bearer ${token}`,
  };

  return request;
}, (error) => Promise.reject(error));

这解决了问题吗？

【讨论】：

不，仍然只有授权标头

【解决方案2】：

我认为你可以重复使用最初的 axiosInstance，并且当你这样做时，标题将被合并：

await axios.put(`${CREDITS_URL.CREDITS}/invoice/limit`,{}, {
  headers: {
    invoiceLimit: `${-invoiceLimit}`
  }
})

【讨论】：

我试过这种方法，但没有结果