Node.js项目中表单数据无法传递至服务端的问题排查

1. body-parser不支持multipart/form-data格式 #

body-parser的urlencoded()和json()仅能处理application/x-www-form-urlencoded和application/json类型的请求体，而FormData提交的是multipart/form-data类型，直接用body-parser解析会导致req.body返回undefined。

解决方法：使用multer中间件 #

multer是Express生态中专门处理multipart/form-data的中间件，适合包含或不包含文件上传的表单场景：

• 安装依赖：npm install multer
• 后端配置示例：

const express = require('express');
const multer = require('multer');
const app = express();

// 无文件上传时，使用内存存储即可
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 处理/contact接口，用upload.none()声明仅解析文本字段
app.post('/contact', upload.none(), (req, res) => {
  console.log(req.body); // 可正常获取first-name、last-name等字段
  res.status(200).json({ success: true, data: req.body });
});

2. 前端手动设置了Content-Type #

若前端fetch请求中手动指定Content-Type: multipart/form-data，会导致浏览器无法自动添加用于分隔表单字段的boundary标识，后端无法正确解析请求体。

错误示例： #

// 错误：手动设置Content-Type会破坏自动boundary生成
fetch('/contact', {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  body: formData
});

正确示例： #

const form = document.getElementById('contact-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  // 无需手动设置Content-Type，浏览器自动处理
  const response = await fetch('/contact', {
    method: 'POST',
    body: formData
  });
  const result = await response.json();
  console.log(result);
});

3. 表单字段name属性不匹配 #

检查HTML表单中各输入框的name属性是否与后端读取的字段名完全一致：

<!-- 正确：name属性为first-name，后端需用req.body['first-name']读取 -->
<input type="text" name="first-name" id="first-name">
<textarea name="message" id="message"></textarea>

若后端习惯用驼峰命名（如req.body.firstName），需同步修改表单的name属性为firstName。

4. 替代方案：转成x-www-form-urlencoded格式提交 #

若表单无文件上传需求，也可将FormData转换为application/x-www-form-urlencoded格式，直接使用Express内置的express.urlencoded解析：

前端代码： #

const form = document.getElementById('contact-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  const urlEncodedData = new URLSearchParams(formData);
  const response = await fetch('/contact', {
    method: 'POST',
    body: urlEncodedData
  });
  const result = await response.json();
  console.log(result);
});

后端配置： #

const express = require('express');
const app = express();

// 启用内置的urlencoded解析器
app.use(express.urlencoded({ extended: true }));

app.post('/contact', (req, res) => {
  console.log(req.body); // 可正常获取表单数据
  res.status(200).json({ success: true });
});

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