Express跨域请求中FormData提交后req.body显示undefined问题

问题原因 #

Express 默认仅支持解析 application/json 和 application/x-www-form-urlencoded 格式的请求体，而你前端发送的是 multipart/form-data 类型的 FormData，默认中间件无法解析这种格式，导致 req.body 为 undefined。

解决方案：使用 multer 中间件解析 FormData #

multer 是 Express 生态中专门用于处理 multipart/form-data 类型请求的中间件，步骤如下：

1. 安装 multer
   在项目目录下执行命令：

npm install multer

2. 修改 Node.js 端代码
   引入并配置 multer，在路由中使用该中间件：

const Router = require('express');
const cors = require('cors');
const multer = require('multer');
const router = Router();

// 配置 multer：如果不需要接收文件，使用 memoryStorage 即可
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

router.use(cors())
const postOptions = {
    origin: 'http://127.0.0.1:5500',
}

// 在路由中添加 upload.none() 中间件（表示只接收文本字段，不处理文件）
router.post('/add', cors(postOptions), upload.none(), (req, res)=> {
    console.log(req.body); // 现在可以正常获取 FormData 中的字段了
    res.send('hello from node! Data received!');
})

关键说明 #

• upload.none()：用于只解析 FormData 中的文本字段，不处理文件上传场景。如果需要接收文件，可改用 upload.single('filename')（单个文件）或 upload.array('filenames', count)（多个文件）。
• 前端无需修改代码：fetch 在发送 FormData 时会自动设置正确的 Content-Type: multipart/form-data 请求头，不需要手动添加。

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