ReactJS无法向ExpressJS提交FormData的问题排查

核心问题1：Content-Type设置错误 #

你在axios请求里手动指定了Content-Type: application/json，但实际发送的是FormData对象，这会导致Express无法正确解析请求体。FormData对应的正确Content-Type是multipart/form-data，axios检测到数据为FormData时会自动设置这个请求头，无需手动配置。

修改React端的axios请求代码，删除手动设置的headers：

axios({
  method: 'post',
  url: '/user_post', // 注意：若API有前缀（如/api）需补充完整，避免相对路径错误
  data: fd1
})
.then(function (response) {
  alert(response.data);
})
.catch(function (error) {
  alert(error);
});

核心问题2：Express缺少FormData解析中间件 #

Express默认的express.json()和express.urlencoded()中间件无法处理multipart/form-data类型的请求体，需要引入multer中间件来解析FormData。

1. 先安装multer依赖：

npm install multer

2. 在Express路由文件中配置multer：

const multer = require('multer');
const upload = multer(); // 默认配置，仅解析文本字段，不处理文件上传

router.post('/user_post', upload.none(), (req, res, next) => {
  console.log(req.body);
  var name = req.body.n_name;
  res.send(name);
});

upload.none()表示只解析FormData中的文本字段，适配你的业务场景。

额外检查项 #

• 确认请求URL正确性：React中的url:'user_post'可能存在相对路径问题，建议根据Express服务的实际地址补充完整路径（如http://localhost:5000/user_post或/api/user_post）。
• 确认Express已配置基础中间件：保留express.json()和express.urlencoded({ extended: true })，避免影响其他接口的解析。

内容的提问来源于stack exchange，提问作者Indu Bhusan Nath