Axios中form方法自定义Content-Type头未生效问题求助

你的问题主要出在两个核心点：请求拦截器的强制覆盖，以及表单请求的数据格式不匹配。

1. 请求拦截器覆盖了自定义的Content-Type #

你的请求拦截器里直接给config.headers['Content-Type']赋值为application/json，这个操作会强制覆盖所有请求的Content-Type——包括你在form方法里特意设置的application/x-www-form-urlencoded。因为Axios的请求拦截器执行顺序在方法传入的配置之后，所以拦截器的赋值会直接覆盖你自定义的请求头。

修复方法： #

修改拦截器逻辑，仅在未指定Content-Type时才设置默认值：

const requestInterceptor = config => {
  // 仅当请求未指定Content-Type时，设置默认的json类型
  if (!config.headers['Content-Type']) {
    config.headers['Content-Type'] = 'application/json';
  }
  config.headers['Accept'] = 'application/json';
  config.headers['X-Client'] = 'React';
  return config;
}

2. 表单请求的数据格式不符合要求 #

当你设置Content-Type为application/x-www-form-urlencoded时，Axios要求请求体必须是URLSearchParams实例或符合表单格式的字符串。如果直接传入普通对象，Axios无法正确序列化数据，浏览器会自动调整Content-Type（比如变为text/plain），导致实际请求头既不是json也不是表单类型。

修复方法： #

将请求数据转换为URLSearchParams格式：

const form = async (url, data) => {
  const formParams = new URLSearchParams();
  // 遍历对象，将键值对添加到URLSearchParams中
  Object.entries(data).forEach(([key, value]) => {
    formParams.append(key, value);
  });

  return await axiosApi
    .post(url, formParams, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    .then(response => response?.data)
}

如果需要处理嵌套对象等复杂数据，可以使用qs库来序列化：

1. 先安装依赖：

npm install qs

2. 修改form方法：

import qs from 'qs';

const form = async (url, data) => {
  return await axiosApi
    .post(url, qs.stringify(data), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    .then(response => response?.data)
}

验证步骤 #

1. 先修改拦截器逻辑，确保自定义请求头不会被覆盖；
2. 调整form方法的数据格式，确保请求体与Content-Type匹配；
3. 重新发起请求，通过浏览器开发者工具的Network面板确认Content-Type是否正确。

内容的提问来源于stack exchange，提问作者Big boy