POST请求提交表单时出现400错误及Mongoose路径必填警告问题

前端代码错误点 #

• fetch选项字段名错误：Headers和Body需改为小写的headers和body，fetch API的配置字段为驼峰小写开头。
• Content-Type格式错误："application / json"里的空格要删除，正确格式是"application/json"，否则后端无法正常解析JSON数据。
• 未定义提交数据：没有将state中的title、writer、books组装成提交用的data对象，导致后端接收不到字段值，触发Mongoose必填校验。
• 变量名拼写错误：feetchData应为fetchData（虽不影响功能，但属于语法不规范）。

修复后的前端handleSubmit代码：

const handleSubmit = async (e) => {
  e.preventDefault();
  // 组装要提交的数据
  const data = { title, writer, books };
  const fetchData = await fetch("http://localhost:5000/books", {
    method: "POST",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify(data),
  });
};

后端排查建议 #

• 先确认Mongoose的Book Schema中title、writer、books字段是否设置为必填（required: true），如果是可选字段可调整Schema配置，但优先保证前端发送正确数据。
• 可以在controller中添加日志，确认是否接收到正确的请求体：

const postNewBooks = async (req, res) => {
  console.log("接收的请求体：", req.body); // 新增日志用于排查
  const { title, writer, books } = req.body;
  try {
    const data = await book.create({ title, writer, books });
    res.status(200).send(data);
  } catch (error) {
    res.status(400).json({ error: error.message });
    console.log(error.message);
  }
};

总结 #

核心问题是前端发送请求时的参数格式错误，导致后端无法解析到必填字段，进而触发Mongoose的必填校验警告和400错误。修复前端的fetch配置与数据组装逻辑后，即可解决该问题。

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