为何服务器无法接收表单值？POST请求问题排查求助

核心问题：请求缺少Content-Type头 #

前端fetch发送JSON格式数据时，未设置Content-Type: application/json请求头，导致后端的express.json()中间件无法正确解析请求体，最终req.body返回空对象。

修复步骤 #

1. 为前端fetch请求添加请求头 #

修改前端fetch配置，补充headers字段声明数据格式：

const user = await fetch('http://localhost:8080/user/register', {
  method: "POST",
  headers: {
    "Content-Type": "application/json" // 必须添加该头，告知后端数据格式
  },
  body: JSON.stringify(values)
})

2. 完善Formik的onSubmit参数接收 #

原代码中onSubmit未显式接收values参数，虽然作用域内可获取，但显式传递更稳妥，避免潜在作用域问题：

onSubmit: async (values) => { // 显式接收Formik收集的表单值
  console.log('表单数据：', values); // 先确认数据是否正确收集
  const user = await fetch('http://localhost:8080/user/register', {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(values)
  })
}

3. 确认后端中间件配置（当前已正确，无需修改） #

你的后端已正确配置express.json()中间件，且放在路由之前加载，这个顺序是正确的，能保证路由处理前完成请求体解析。

额外检查点 #

• 确认initialValues已正确初始化，需与表单字段一一对应，比如：

const initialValues = {
  username: '',
  email: '',
  password: ''
  // 匹配你的表单输入字段名
};

• 若浏览器控制台出现CORS错误，需在后端添加cors中间件解决跨域问题。

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