NodeJs+Express+MongoDB应用注册时validation failed报错排查

报错核心不是Mongoose校验规则有问题，是后端根本没接收到前端传的三个字段，req.body拿到的是空值，三个字段全为undefined才触发必填校验，叠加几个代码笔误导致问题一直无法解决，具体问题点：

• 后端未配置请求体解析中间件：Express框架默认不会解析请求携带的参数，req.body默认为空；且前端当前传的是FormData格式（对应multipart/form-data请求头），Express自带的解析中间件无法处理这种格式，直接导致取不到参数。
• 控制器存在拼写错误：res.statuts为错误写法，正确方法名是res.status，即使参数正常，执行到响应逻辑时也会抛出方法不存在的异常。
• 前端取值逻辑脆弱：通过e.target[索引]的方式按DOM顺序取输入框值，一旦表单结构调整很容易出现取值错位、取不到值的问题。
• 接口错误处理缺失：控制器的catch逻辑仅打印错误，没有给前端返回响应，会导致前端请求一直挂起。

后端调整 #

1. 配置请求体解析中间件，在所有路由注册之前添加以下配置：
   如果不需要上传文件，优先用Express自带的中间件解析JSON和普通表单格式：

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

// 解析JSON格式请求体
app.use(express.json());
// 解析application/x-www-form-urlencoded格式请求体
app.use(express.urlencoded({ extended: true }));

如果后续需要支持文件上传、必须使用FormData格式，安装multer包处理multipart格式请求：

npm install multer

在对应路由上添加解析中间件：

const multer = require('multer');
const upload = multer(); // 无文件上传场景用该配置即可

// 注册路由时挂载中间件
router.post('/signup', upload.none(), userController.signup);

2. 修正控制器代码，修复拼写错误、补全错误响应：

exports.signup = (req, res, next) => {
  // 调试阶段可打开下面这行日志，确认后端是否正常接收到参数
  // console.log('接收到的请求参数：', req.body);
  const user = new User({
    mail: req.body.mail,
    password: req.body.password,
    pseudo: req.body.pseudo,
  });
  user
    .save()
    .then(() => res.status(201).json({ message: "User created !" }))
    .catch(err => res.status(400).json({ error: err }))
}

前端调整 #

去掉手动按索引取值、手动拼接FormData的冗余逻辑，直接从表单实例获取数据，和后端的解析格式匹配：

const handleSubmit = (e) => {
  e.preventDefault()
  // 直接从表单元素生成参数对象，自动按input的name属性匹配字段，不会出现索引错位问题
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData.entries());

  axios.post(url, data)
    .then(res => console.log(res))
    .catch(err => console.log(err.response?.data || err))
};

改完后先调用接口，查看后端控制台打印的req.body内容，如果能正常输出三个字段的传值，再执行保存逻辑就不会触发必填校验报错。

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