React项目前端传值至后端时出现Mongoose数据未定义错误

问题根源 #

你的问题出在前端fetch请求未设置正确的请求头，导致后端无法解析JSON格式的请求体，所以req.body为空对象，解构出的name/email/message自然都是undefined，触发Mongoose的必填字段验证错误。

Postman测试正常是因为Postman会自动为JSON请求添加Content-Type: application/json头，而原生fetch默认不会添加这个头。

修复步骤 #

1. 前端修改fetch请求，添加请求头 #

在ContactUs组件的handleSubmit函数中，为fetch请求添加headers配置：

const handleSubmit = async (e) => {
  e.preventDefault()

  const formm = {name, email, message}

  const response = await fetch('/api/forms',{
    method: 'POST',
    headers: {
      'Content-Type': 'application/json' // 新增这行配置
    },
    body: JSON.stringify(formm)
  })
  const json = await response.json()

  // 其余代码保持不变...
}

2. 确认后端已配置JSON解析中间件 #

确保你的后端入口文件（如server.js或app.js）中已经添加了解析JSON请求体的中间件：

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

// 必须添加此中间件，用于解析JSON格式的请求体
app.use(express.json());

// 后续路由、数据库连接等配置...

验证修改 #

修改完成后重启前后端服务，提交表单时后端控制台应能正常打印收到的name/email/message数据，Mongoose验证将通过并成功创建文档。

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