React Native中Axios向SpringBoot发送含JSON的Multipart请求失败求助

1. 修正Blob的MIME类型设置 #

后端@RequestPart接收JSON类型参数时，必须明确指定Blob的application/json类型，否则Spring Boot无法识别该字段为JSON参数。

// 正确构造JSON Blob
const contactRequest = { /* 你的请求JSON对象 */ };
const contactBlob = new Blob(
  [JSON.stringify(contactRequest)],
  { type: 'application/json' } // 必须指定MIME类型
);

2. 不要手动设置Axios的Content-Type #

Axios会自动根据FormData生成包含boundary的multipart/form-data请求头，手动设置会覆盖boundary，导致后端无法正确解析请求体。

const formData = new FormData();
formData.append('request', contactBlob);
// 处理文件（如果有）
files.forEach(file => {
  formData.append('files', file);
});

// Axios请求配置：删除手动设置的Content-Type
axios.post('/api/contact', formData, {
  // headers: { 'Content-Type': 'multipart/form-data' } ❌ 移除这行
});

3. 尝试直接append JSON字符串（绕过Blob） #

部分React Native环境下Blob处理存在兼容性问题，可直接将JSON字符串append到FormData，Spring Boot的@RequestPart通常能自动解析为JSON对象。

const formData = new FormData();
formData.append('request', JSON.stringify(contactRequest)); // 直接传递字符串

4. 为request字段添加文件名（可选但有效） #

部分后端解析器需要明确的文件名标识，append时指定第三个参数作为文件名，可帮助后端识别内容类型：

formData.append('request', contactBlob, 'request.json');

5. 抓包对比请求差异 #

用Charles或React Native DevTools的Network面板抓包，对比Insomnia与Axios发送的请求：

• 检查request字段的Content-Disposition是否包含name="request"
• 检查Content-Type是否为application/json
• 确认boundary是否正确生成

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