Axios请求拦截器修改请求头时意外篡改请求负载问题咨询

问题根源分析 #

你的拦截器代码本身没有直接修改请求负载，但出现JSON字符串被转成对象的情况，核心原因是Axios的默认请求转换逻辑被间接触发：

Axios会根据请求头的Content-Type自动处理请求数据：

• 若Content-Type被设为application/json，Axios默认的transformRequest函数会对数据做序列化；如果你的请求数据本身就是JSON字符串，部分旧版本Axios会误将其解析为JSON对象后重新序列化，导致原始字符串的格式（比如转义字符）被篡改。
• 当拦截器修改请求头后，Axios可能自动补全未显式设置的Content-Type，触发上述转换逻辑；移除拦截器时，请求头未被修改，Content-Type保持未设置状态，Axios不会执行自动转换，原始字符串得以保留。

另外也不排除你使用的Axios版本存在bug，拦截器执行后重复触发transformRequest流程，导致数据被二次处理。

解决方案 #

针对该问题，可通过以下方式解决：

1. 显式跳过Axios默认数据转换 #

在请求配置中添加transformRequest，直接返回原始数据，禁用自动转换逻辑：

axios.post('/your-api', yourJsonString, {
  transformRequest: [data => data]
});

2. 显式设置正确的Content-Type #

如果请求负载是JSON字符串，直接指定Content-Type，避免Axios自动推断类型：

// 可在拦截器或单个请求中设置
config.headers['Content-Type'] = 'application/json'; // 或根据实际需求设为'text/plain'

3. 升级Axios到最新稳定版 #

部分旧版本Axios存在拦截器与请求转换逻辑的兼容问题，升级至v1.x及以上的最新版可修复此类bug。

4. 排查自定义头的设置 #

确认HEADER常量是自定义请求头，而非Content-Type，避免误覆盖默认的类型配置。

验证方法 #

可在拦截器中打印关键参数，对比拦截前后的数据变化，确认是否为Content-Type自动设置触发了转换：

axios.interceptors.request.use((config) => {
  console.log('拦截前data:', config.data);
  console.log('拦截前headers:', config.headers);
  const customerId = getCustomerID();
  if (config?.headers && customerId){
    config.headers[HEADER] = customerId;
  }
  console.log('拦截后data:', config.data);
  console.log('拦截后headers:', config.headers);
  return config;
});

内容的提问来源于stack exchange，提问作者Adrian E