Angular 12中POST请求Query Params传参后端接收为null的问题

核心问题 #

你用Angular的HttpParams作为post方法的第二个参数时，Angular会把它当作请求体发送，但后端用[FromQuery]是从URL查询字符串中获取参数，两者不匹配，导致后端接收不到数据。

解决方案1：继续使用URL查询参数传递（适合需暴露参数在URL的场景） #

Angular代码修改

把HttpParams放到post请求的options参数中，而非作为请求体：

tokenizeUserDetails() {
  // ...
  let params = new HttpParams();
  params = params.append('Id', 0);
  params = params.append('nn', payload.nonce);
  params = params.append('price', this.price);
  params = params.append('username', this.username);
  
  // 第二个参数传空对象，将params放到options配置里
  this.http.post(this.baseUrl + 'paypal', {}, { params: params }).subscribe({
    next: response => { 
      console.log(this.CToken);
      this.CToken = response;
    },
    // ... 其他回调逻辑
  });
}

后端代码保持不变

依然用[FromQuery]接收URL查询参数：

[HttpPost]
public async Task<paypalDto> Create([FromQuery] paypalDto order)
{
   // ...
}

解决方案2：使用请求体传递参数（更符合POST请求的REST规范，推荐） #

Angular代码修改

直接传递普通对象作为请求体，无需HttpParams：

tokenizeUserDetails() {
  // ...
  const requestBody = {
    Id: 0,
    nn: payload.nonce,
    price: this.price,
    username: this.username
  };
  
  this.http.post(this.baseUrl + 'paypal', requestBody).subscribe({
    next: response => { 
      console.log(this.CToken);
      this.CToken = response;
    },
    // ... 其他回调逻辑
  });
}

后端代码修改

将[FromQuery]改为[FromBody]，从请求体中解析数据：

[HttpPost]
public async Task<paypalDto> Create([FromBody] paypalDto order)
{
   // ...
}

补充说明 #

• 你之前直接传四个参数报重载错误，是因为HttpClient.post不支持直接传多个零散参数，需要把参数包装成一个对象作为请求体。
• HttpParams是不可变对象，你代码中params = params.append(...)的写法是正确的，这个不是问题所在。

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