React+Node.js环境下FormData对象收发失败问题求助

你的代码里有两个关键错误导致FormData发送失败：

错误1：错误序列化FormData #

你用JSON.stringify(forms)处理FormData对象，但FormData无法被JSON正确序列化，这会导致实际发送的是{}这样的空JSON对象，后端自然拿不到有效数据。

错误2：错误设置请求头 #

发送FormData时，不需要手动设置Content-Type: application/json，浏览器会自动为FormData生成正确的multipart/form-data请求头（包含自动生成的boundary分隔符），手动设置反而会破坏这个自动处理流程。

修正后的前端代码 #

handleSubmit(data) { 
  console.log(data); 
  const forms = new FormData(); 
  forms.append('fname', 'pranab'); 
  fetch('http://localhost:8080/reactTest', { 
    method: 'POST', 
    mode: 'CORS', 
    body: forms // 直接传入FormData对象，无需转JSON
    // 此处不要手动设置Content-Type，交给浏览器自动处理
  })
  .then(res => res.json())
  .then(result => console.log(result))
  .catch(err => console.error('请求出错:', err)); // 建议增加错误捕获，方便排查问题
}

Node.js后端处理示例（Express框架） #

如果你的后端基于Express，需要使用multer中间件来解析multipart/form-data格式的请求：

1. 先安装依赖：

npm install multer

2. 后端代码示例：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer(); // 仅处理文本类型FormData，不涉及文件存储

// 处理CORS预检与跨域权限
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200); // 响应预检请求，放行后续真实请求
  }
  next();
});

// 处理FormData类型的POST请求
app.post('/reactTest', upload.none(), (req, res) => {
  // 解析后的FormData数据会存放在req.body中
  console.log('收到的FormData数据:', req.body);
  res.json({ success: true, receivedData: req.body });
});

app.listen(8080, () => {
  console.log('服务器运行在http://localhost:8080');
});

说明：

• upload.none()表示仅处理文本字段的FormData，如果需要处理文件上传，可以替换为upload.single('file')或其他multer对应方法。
• 处理OPTIONS请求是因为CORS机制下，浏览器会先发送预检请求确认权限，必须正确响应才能让后续POST请求正常执行。

这样修改后，前端就能正确发送FormData，后端也能正常接收并返回数据了。

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