如何使用Express和React调试POST请求400错误

1. 核对请求数据与后端校验规则 #

手动请求正常说明后端逻辑没问题，前端提交的数据大概率不符合后端validation规则：

• 打开浏览器DevTools的Network面板，查看失败POST请求的Payload，和手动请求的参数逐一对比：
  • 字段名是否完全一致（比如后端校验amount，前端传成money）
  • 数据类型是否匹配（比如后端要求amount是数字，前端传了字符串；日期格式是否符合后端要求，如YYYY-MM-DD）
  • 必填字段是否都传了有效值（比如后端校验category为必填，前端漏传或传空值）
• 对照后端validations代码，检查每个字段是否符合长度、数值范围等规则。

2. 确认请求头Content-Type配置 #

如果后端用express.json()解析请求体，前端必须保证请求头Content-Type为application/json：

• 检查Axios请求配置，避免误传form-data格式：

  // 正确的Axios POST配置示例
  axios.post('http://localhost:325/budget', formData, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  

3. 检查前端数据处理逻辑 #

• 查看BudgetNew组件中，表单提交时是否正确收集、处理数据：
  • 是否有字段被意外过滤、转换错误（比如把数字转成字符串，或日期格式处理错误）
  • 是否在提交前对数据做了不必要修改，导致不符合后端要求
• 在Axios请求前添加日志，打印待发送的formData，和手动请求参数对比：

  console.log('提交的数据:', formData);
  axios.post(...)
  

4. 排查请求URL与参数位置错误 #

• 确认请求URL完全正确，避免路径拼写错误（比如写成/budgets而非/budget）
• 检查是否把查询参数误放到请求体，或者反之（后端期望某些参数在query里，前端却放到body中）

5. 查看后端校验错误详情 #

在后端budget_controller的POST接口中添加错误日志，打印具体校验失败信息：

// 后端校验失败分支添加日志
if (!validationResult.isEmpty()) {
  console.log('校验错误:', validationResult.array());
  return res.status(400).json({ errors: validationResult.array() });
}

重新触发前端请求后，查看后端控制台的错误信息，可精准定位问题字段。

内容的提问来源于stack exchange，提问作者Noni P.