使用 axios 发送 formdata 时，若未正确设置请求头，express 默认无法解析 multipart/form-data，导致 req.body 为空；关键在于禁用 axios 自动设置的 content-type，并交由浏览器自动设置 boundary。
使用 axios 发送 formdata 时，若未正确设置请求头，express 默认无法解析 multipart/form-data，导致 req.body 为空；关键在于禁用 axios 自动设置的 content-type，并交由浏览器自动设置 boundary。
在前端通过 FormData 构造表单数据并用 Axios 提交时，一个常见误区是误以为只需配置 body-parser 就能自动处理所有类型的数据。实际上，body-parser.urlencoded() 仅解析 application/x-www-form-urlencoded 类型，而 FormData 默认触发的是 multipart/form-data 请求——它带有动态生成的 boundary，必须由支持该类型的中间件（如 multer）解析，或通过正确配置 Axios 避免触发 multipart。
✅ 正确做法：让浏览器自动设置 Content-Type
Axios 在检测到 FormData 实例时，会自动设置 Content-Type: multipart/form-data; boundary=...，但前提是 你不手动覆盖该 header。一旦显式设置 Content-Type: 'application/json' 或 'application/x-www-form-urlencoded'，就会破坏 FormData 的二进制结构，导致服务端无法识别字段，req.body 为空。
❌ 错误写法（强制 JSON 类型）：
axios.post(url, formdata, {
headers: { 'Content-Type': 'application/json' } // ❌ 破坏 FormData
});
✅ 正确写法（不设置 Content-Type，交由浏览器自动处理）：
const url = `${location.origin}/agregar/`;
const formdata = new FormData();
formdata.append("urlProyect", btneliminar.dataset.proyectoUrl);
formdata.append("tarea", nuevaTarea.value);
// 关键：不传 headers，或显式删除 Content-Type
axios.post(url, formdata, {
headers: {} // ✅ 允许 Axios 自动设置 multipart 头
});
⚙️ 服务端需适配 multipart 解析
body-parser 不支持 multipart/form-data。若你坚持用 FormData（尤其含文件上传），服务端必须改用 multer：
npm install multer
const multer = require('multer');
const upload = multer(); // 内存存储，适合纯文本字段
app.use(upload.none()); // 仅处理无文件的 FormData（即纯文本字段）
// 或使用 upload.fields([]) / upload.any()（按需配置）
// 注意：不再依赖 bodyParser.urlencoded()
// 删除或注释掉这一行：
// app.use(bodyParser.urlencoded({ extended: true }));
控制器中即可正常访问：
exports.agregarTarea = async (req, res) => {
console.log(req.body); // ✅ { urlProyect: '...', tarea: '...' }
// 处理逻辑...
};
? 替代方案：纯文本提交（推荐轻量场景）
若无需上传文件，更简洁的方式是避免 FormData，直接发送 URL-encoded 对象：
axios.post(url, {
urlProyect: btneliminar.dataset.proyectoUrl,
tarea: nuevaTarea.value
}, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
并确保服务端启用：
app.use(bodyParser.urlencoded({ extended: true }));
? 总结要点
-
FormData+ Axios → 必须 不手动设置Content-Type，让浏览器自动生成multipart/form-data； - Express 原生不解析 multipart → 必须引入
multer（即使只传文本字段）； - 若仅传输字符串字段，优先选用
application/x-www-form-urlencoded+bodyParser，更轻量可靠； - 永远验证
req.body是否为undefined或空对象，并检查服务端中间件加载顺序（multer/bodyParser必须在路由前注册）。
遵循以上任一路径，即可彻底解决 req.body 为空的问题。
