Next.js中Axios请求遇'content-type missing boundary'及getBoundary报错的解决方法

原代码 #

getCarouselData: async (params) => {
  let bodyFormData = new FormData();
  for (let key in params) {
    bodyFormData.append(key, params[key]);
  }
  return axios({
    method: "post",
    url: `${baseURL}/getCarouselData`,
    data: bodyFormData,
    headers: { "Content-Type": `multipart/form-data;};` },
  });
};

遇到的问题 #

• 设置Content-Type: "multipart/form-data;"时，出现content-type missing boundary错误
• 设置Content-Type: "multipart/form-data; boundary=${bodyFormData.getBoundary()};"时，出现bodyFormData.getBoundary is not a function错误
• 移除Content-Type或不设置headers时，出现unsupported content-type错误

注：上述场景均能收到API响应，且Postman中请求正常。

解决方案 #

核心原因 #

手动设置multipart/form-data类型时，必须携带动态生成的boundary（用于分隔表单字段），而不同环境下的FormData实现差异（浏览器 vs Node.js）会导致手动获取boundary失败；同时部分服务器要求必须显式指定multipart/form-data类型，不能依赖自动推断。

具体修复步骤 #

1. 浏览器客户端环境（Next.js客户端组件）

直接删除手动设置的Content-Type，让Axios自动处理请求头——Axios会识别data为FormData，自动生成包含正确boundary的Content-Type：

getCarouselData: async (params) => {
  let bodyFormData = new FormData();
  for (let key in params) {
    bodyFormData.append(key, params[key]);
  }
  return axios({
    method: "post",
    url: `${baseURL}/getCarouselData`,
    data: bodyFormData
    // 移除手动headers设置
  });
};

如果服务器仍返回unsupported content-type，尝试显式调用浏览器FormData的getHeaders方法（部分现代浏览器支持）：

getCarouselData: async (params) => {
  let bodyFormData = new FormData();
  for (let key in params) {
    bodyFormData.append(key, params[key]);
  }
  return axios({
    method: "post",
    url: `${baseURL}/getCarouselData`,
    data: bodyFormData,
    headers: {
      ...(bodyFormData.getHeaders?.())
    }
  });
};

2. Next.js服务端环境（API路由、getServerSideProps等）

Node.js原生FormData（v18+支持）没有getBoundary或getHeaders方法，建议使用第三方form-data包来处理：

• 先安装依赖：

npm install form-data

• 修改代码：

import FormData from 'form-data'; // 或require

getCarouselData: async (params) => {
  let bodyFormData = new FormData();
  for (let key in params) {
    bodyFormData.append(key, params[key]);
  }
  return axios({
    method: "post",
    url: `${baseURL}/getCarouselData`,
    data: bodyFormData,
    headers: bodyFormData.getHeaders() // 自动生成带boundary的Content-Type
  });
};

为什么Postman正常？ #

Postman会自动为multipart/form-data请求生成并添加正确的boundary和Content-Type，无需手动配置，因此不会出现上述错误。

内容的提问来源于stack exchange，提问作者Ajith Arasu