React+ASP.NET Core Web API注册接口接收数据为Null问题求助

核心原因 #

React端发送请求时，将表单数据包裹在了额外的values对象中，导致后端无法正确映射到User实体字段；同时后端控制器未明确指定从请求体绑定数据，这也是字段为空的关键诱因。

具体修复步骤 #

1. 修正React端请求数据格式 #

在onSubmit方法中，直接传递整理后的表单数据，移除不需要的confirm_password字段（后端实体无此属性）：

onSubmit: (values) => {
    console.log(values);
    // 移除不需要的确认密码字段
    const submitData = {...values};
    delete submitData.confirm_password;
    try {
        axios({
            method: "post",
            url: "http://localhost:64082/api/users/register",
            data: submitData // 直接传递整理后的表单数据
        });
        alert("Success!");
    } catch (error) {
        alert("Error: " + error);
    }
},

2. 后端控制器添加[FromBody]特性 #

ASP.NET Core默认不会自动从请求体绑定复杂类型，需在参数上添加[FromBody]明确指定绑定来源：

[HttpPost("register")]
public async Task<IActionResult> Register ([FromBody]User oUser)
{
    var result = await _userService.Register(oUser); // 添加await等待异步方法执行
    return result != null ? Ok(result) : BadRequest(result);
}

3. 修复仓储层异步调用问题 #

仓储的Register方法是异步方法，原控制器调用时未使用await，会导致异步操作未完成就返回结果，需补充await（如上代码所示）。

额外排查点 #

• CORS配置：前端与后端端口不同，需确保后端已配置CORS允许前端域名访问：

  // Program.cs中添加CORS服务配置
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowLocalhost", policy =>
      {
          policy.WithOrigins("http://localhost:你的前端端口")
                .AllowAnyHeader()
                .AllowAnyMethod();
      });
  });
  // 在路由配置后启用CORS
  app.UseRouting();
  app.UseCors("AllowLocalhost");
  

• JSON序列化配置：确保后端JSON序列化规则与前端字段大小写匹配，若需保持实体字段的PascalCase命名与前端一致，可关闭默认驼峰序列化：

  builder.Services.AddControllers()
      .AddJsonOptions(options =>
      {
          options.JsonSerializerOptions.PropertyNamingPolicy = null;
      });
  

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