如何在全局Axios实例的自定义请求中添加额外请求头且不被拦截器覆盖

问题根因 #

你的自定义header丢失是两个错误共同导致的：

1. 你自行封装了axiosInstance实例，但请求代码中使用的是全局axios对象，两者的配置完全独立，修改axios.defaults不会作用到你自己封装的实例上
2. 请求拦截器中直接全量重写了request.headers对象，覆盖了所有已存在的header，仅保留了Authorization字段，就算配置正确也会被清除

另外你写的响应拦截器中修改response.config.headers属于无效代码，不会对请求逻辑产生任何影响，可以直接删除。

修复方案 #

1. 先修改请求拦截器，合并header而非全量覆盖

在原有header的基础上追加Authorization字段，不会覆盖已有的自定义header：

axiosInstance.interceptors.request.use((request) => {
  // 仅追加Authorization字段，保留已有的所有header
  request.headers.Authorization = `Bearer ${token}`;
  return request;
}, (error) => Promise.reject(error));

2. 修改请求代码，两种实现方式可选

推荐优先使用单请求传自定义header的方案，不会污染全局配置，避免其他请求带上多余的invoiceLimit字段：

// 导入你自己封装的axiosInstance
import axiosInstance from '你的axios实例文件路径'

export const updateInvoiceLimit = async (
  invoiceLimit: string,
): Promise<ReturnDataType> => {
  let result: ReturnDataType = {} as ReturnDataType;
  try {
    // put方法第三个参数传入自定义header配置即可
    result = await axiosInstance.put(
      `${CREDITS_URL.CREDITS}/invoice/limit`,
      {}, // 无请求体时传空对象
      {
        headers: {
          invoiceLimit: `${-invoiceLimit}`
        }
      }
    );
    return result;
  } catch (error) {
    SnackBarUtils.error(`${(error as Error).message}. ${result.data?.message || ''}`);
  }
  return result;
};

如果你确实需要修改全局配置，需要修改你自己封装实例的defaults，而非全局axios的配置：

axiosInstance.defaults.headers.common.invoiceLimit = `${-invoiceLimit}`;

内容的提问来源于stack exchange，提问作者Gaidashevskyi Anton