React对接Spring Boot时POST/PUT请求报400错误该如何排查？

问题根因 #

你的后端接口缺少@RequestBody注解，无法解析前端传入的JSON格式请求体，触发参数校验失败返回400错误。
你用Postman测试正常大概率是因为发请求时选择了form-data/x-www-form-urlencoded格式，Spring默认可以解析这类表单参数，而前端传的是application/json格式的请求体，必须加@RequestBody才能把JSON反序列化为Product实体。

修复步骤 #

1. 修改后端Controller接口参数，添加@RequestBody注解

@PostMapping
public @ResponseBody Product postProduct(@Valid @RequestBody Product product){
    productRepository.save(product);
    return product;
}

@PutMapping
public Product putProduct(@Valid @RequestBody Product product) {
    productRepository.save(product);
    return product;
}

2. 前端序列化参数时做类型转换
   你state里的prix、rabais默认是字符串类型，后端要求是double数值，序列化前先转成数字避免校验失败：

async save() {
  const {produit} = this.state
  const requestOptions = {
    method: (produit.id) ? 'PUT' : 'POST',
    // 字段类型转换
    body: JSON.stringify({
      ...produit,
      prix: Number(produit.prix),
      rabais: Number(produit.rabais)
    }),
    ...config
  }
  fetch(baseUrl, requestOptions);
}

可选排查路径 #

如果修改后还有问题可以按以下步骤排查：

• 打开Chrome控制台「网络」标签，查看POST/PUT请求的请求体内容，确认nom非空、prix≥0、rabais在0~1范围内，符合后端校验规则
• 后端添加请求参数日志，打印具体的校验错误信息，定位不符合要求的字段
• 确认package.json的proxy配置没有被其他代理规则覆盖

内容的提问来源于stack exchange，提问作者Felipe Oliveira da Silva