React（Next.js）中使用Axios提交FormData无响应问题求助

针对你在Next.js中使用Axios提交数据、服务端无法接收的问题，逐个分析代码问题并给出修复方案：

第一种JSON提交方式的潜在问题 #

你提交的是JSON格式数据，Axios默认会将Content-Type设为application/json，如果服务端接口期望的是表单格式（application/x-www-form-urlencoded），就会出现解析失败的情况。

修复方案（若服务端需要表单格式） #

先安装qs库（用于序列化表单数据），再修改请求代码：

import qs from 'qs';

axios.post('https://xxxxxxxxxxxx.com/email-monitor/api/testinfo3/', qs.stringify(data), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(response => {
  console.log(response);
})

若服务端支持JSON格式，先做2项检查 #

• 打开浏览器开发者工具的Network面板，确认请求Payload里是否存在email和password字段
• 确认服务端已配置解析JSON请求的中间件（比如Express框架的express.json()）

第二种FormData提交方式的明显错误 #

你的代码存在两个关键错误，直接导致服务端无法解析：

1. 传入了FormData构造函数而非实例：代码中写的data: FormData，但实际应该传入实例化后的formData
2. 手动设置Content-Type导致边界缺失：Axios会自动为FormData请求添加带boundary的multipart/form-data头，手动设置会丢失boundary参数，服务端无法识别数据分隔

修正后的代码 #

const formData = new FormData(); // 先实例化FormData
formData.append('email', emails);
formData.append('password', password);

axios.post('https://xxxxxxxxxxxx.com/email-monitor/api/testinfo3/', formData)
.then(response => {
  alert(JSON.stringify(response.data));
})
.catch(error => {
  alert('error is ' + error.message);
});

通用排查步骤 #

1. 打开浏览器F12的Network面板，核对：
   • Request Headers中的Content-Type是否符合接口要求
   • Payload/Form Data里是否存在提交的字段
2. 查看服务端日志，确认是否接收到请求，以及解析过程中的错误信息
3. 如果是Next.js API路由，需确认是否正确处理对应Content-Type的请求（比如用formidable处理multipart/form-data，或express.json()处理JSON）

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