.NET Core 6接收Angular 12 POST请求时模型属性全为null排查

问题表现 #

• 项目基于.NET Core 6 + Angular 12开发，已完成登录控制器、对应请求模型编写
• Swagger、Postman调用登录接口时，后端可正常接收参数、返回正确结果
• Angular应用发起同接口POST请求时，后端接收到的请求模型所有属性值均为null

相关代码片段 #

后端请求模型 #

public class AuthRequest
{
    public string Username {get; set;}
    public string Password { get; set; }
}

后端登录控制器 #

[AllowAnonymous]
[Route("api/auth")]
public class AuthController : ControllerBase
{
    private readonly iAuthService _authService;

    public AuthController(iAuthService authService)
    {
        _authService = loginService;
    }

    [HttpPost]
    public async Task<IActionResult> Auth(AuthRequest request)
    {
        var response = await _authService.LoginAsync(request);
        return Ok(response);
    }
}

Angular端请求服务代码 #

login(payload: AuthModel): Observable<any> {
    //payload = { Username: 'someusername', Password: 'somePassword' }
    return this.httpClient.post(`${this.baseUrl}/auth`, payload);
 }

根本原因 #

.NET Core 6 的接口参数绑定默认规则下，未标注来源的复杂类型参数会优先尝试从表单格式（application/x-www-form-urlencoded）的请求中取值，而Angular内置HttpClient发送POST请求时，默认的Content-Type为application/json，请求体为JSON序列化格式。后端未按JSON格式解析请求体，就会出现所有属性绑定失败、值为null的情况。
Postman、Swagger调用时会自动匹配后端默认的参数绑定格式，因此可以正常传参。

修复方案 #

两种方案选择其一即可，优先推荐后端修改方案：

• 方案1：后端显式指定参数来源（推荐）
  给Action的入参添加[FromBody]特性，显式声明从请求体中解析JSON格式内容绑定模型，修改后的接口代码如下：

  [HttpPost]
  public async Task<IActionResult> Auth([FromBody] AuthRequest request)
  {
      var response = await _authService.LoginAsync(request);
      return Ok(response);
  }
  

  该方案符合前后端分离架构下JSON传参的通用约定，后续接口扩展复杂参数时兼容性更好。

• 方案2：前端修改传参格式匹配后端默认规则
  调整Angular请求的传参格式为表单编码格式，手动设置对应请求头，示例代码如下：

  login(payload: AuthModel): Observable<any> {
      const formParams = new URLSearchParams();
      formParams.set('Username', payload.Username);
      formParams.set('Password', payload.Password);
      return this.httpClient.post(`${this.baseUrl}/auth`, formParams.toString(), {
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          }
      });
  }
  

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