Postman调用注册接口正常，前端FormData提交触发验证失败

• Postman 调用后端用户注册接口功能正常，提交的name、email、password字段可正常写入数据库
• 前端注册表单填写对应字段提交时，返回Mongoose校验错误：

User validation failed: password: Please Enter Your Password, email: Please Enter Your Email, name: Please Enter Your Name

前后端请求数据格式不匹配：

1. Postman 发起请求时默认使用application/json格式提交数据，后端已配置的express.json()中间件可以正常解析请求体，将字段挂载到req.body上，因此接口可以正常运行
2. 前端提交表单时构造了FormData对象，该格式对应multipart/form-data编码类型，后端未配置该类型请求体的解析中间件，导致req.body为空对象，Mongoose创建用户时拿不到必填字段，直接触发校验报错
3. 当前注册逻辑仅提交3个文本字段，无文件上传需求，本身不需要使用FormData格式传参

二选一即可，优先选方案1，改动最小。

方案1：前端改为直接提交JSON对象（无文件上传场景推荐） #

修改Signup.js中的registerSubmit方法，去掉FormData构造逻辑，直接提交存储表单值的普通JS对象即可，axios会自动将对象序列化为JSON格式并设置正确的请求头：

const registerSubmit = (e) => {
  e.preventDefault();
  // 直接传表单对象，不需要构造FormData
  dispatch(register({ name, email, password }));
};

修改后接口即可正常响应，不需要改动后端代码。

方案2：后端增加multipart格式请求体解析（后续需要传文件如头像时使用） #

如果后续注册功能需要支持头像上传等文件传输场景必须保留FormData格式，后端需要引入multer中间件解析multipart请求：

1. 安装依赖

npm install multer

2. 在userRoute.js中引入multer并配置，给注册接口添加解析中间件：

const multer = require('multer');
const upload = multer(); // 无文件存储需求时可以直接初始化，不需要配置磁盘存储

// 修改注册路由，添加upload.none()处理仅含文本字段的multipart请求
router.route("/register").post(upload.none(), registerUser);

配置后后端即可正常解析FormData格式提交的文本字段，将其挂载到req.body上。

修复后可在浏览器开发者工具的网络面板查看注册请求：

• 若采用方案1，请求的Content-Type为application/json，请求载荷为JSON格式的三个字段
• 若采用方案2，请求的Content-Type为multipart/form-data，携带对应表单字段
  两种方式均可让后端正确拿到字段值，通过Mongoose校验完成注册。

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