Angular 14调用C#异步WebAPI Post接口无法触达问题排查

问题 #

我有一个C# Post方法：

[HttpPost("signup")]
public async Task<IActionResult> Signup([FromBody] User user)

通过Swagger测试时，请求URL为https://localhost:7095/Auth/signup，请求负载如下：

curl -X 'POST' \
  'https://localhost:7095/Auth/signup' \
  -H 'accept: */*' \
  -H 'Content-Type: application/json' \
  -d '{
  "userId": 0,
  "firstname": "string",
  "surname": "string",
  "email": "string",
  "sex": "string",
  "dateOfBirth": "2023-04-03T18:32:08.405Z",
  "password": "string",
  "username": "string"
}'

在Angular 14端，我调用了add方法：

add<T>(data: any, apiMethod: string): Observable<T> | undefined {

    let callPoint = this.endpoint.concat('/', apiMethod);
    console.log(callPoint);
    try {
      var tt = this.httpClient.post<T>(callPoint, JSON.stringify(data), this.httpHeader);
      return tt;
    } catch (e) {
      console.log(e);
    }
    return;
  }

从console.log可见端点与curl命令中的一致，请求头也匹配，且已传入用户负载。但调用未失败，却从未触达后端接口，浏览器网络面板中也无该请求记录。曾怀疑是WebAPI的CORS策略问题，但若是如此应能看到请求尝试与失败记录，现寻求无法发出请求的原因。

分析与解决方案 #

• Observable未订阅：Angular的HttpClient返回的是冷Observable，只有调用.subscribe()方法时才会真正触发HTTP请求。你的add方法仅创建并返回Observable，若调用方没有订阅返回值，请求根本不会发送。
  修正示例：调用add时添加订阅逻辑

  this.yourService.add(userData, 'signup').subscribe({
    next: (res) => console.log(res),
    error: (err) => console.error(err)
  });
  

• 冗余的JSON序列化：HttpClient.post会自动将传入的data序列化为JSON字符串，手动调用JSON.stringify(data)会导致请求体变成双重序列化的字符串，虽不会直接导致请求不发送，但可能引发后端解析错误，建议去掉手动序列化，直接传入data：

  var tt = this.httpClient.post<T>(callPoint, data, this.httpHeader);
  

• 异常捕获范围错误：try/catch仅能捕获同步异常，HttpClient.post创建Observable是同步操作，但请求发送和响应处理是异步的，异步异常无法被该try/catch捕获。如需捕获请求异常，需在订阅时通过error回调处理。

• 请求头配置校验：检查this.httpHeader是否正确设置了Content-Type: application/json，若配置错误可能引发请求异常，但不会完全阻止请求发送。可确认header配置：

  httpHeader = new HttpHeaders({ 'Content-Type': 'application/json' });
  

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