Angular中Observable请求无效但Promise成功，求排查原因

我来帮你定位问题啦！你的第二种Observable方式请求失败的核心原因，是对Angular新的HttpHeaders的特性理解有误，另外还有个小细节也可能影响请求有效性。

核心问题：HttpHeaders是不可变对象 #

在第二种方法里，你这段设置请求头的代码是无效的：

const headers: HttpHeaders = new HttpHeaders(); 
headers.append('Content-Type', 'application/json'); 
headers.append('Authorization', 'Bearer '+this.authService.token); 

Angular的HttpHeaders是不可变设计，调用append()方法不会修改原对象，而是返回一个全新的Headers实例。你没有把这个新实例重新赋值给headers变量，导致最终发送请求时，请求头还是空的，服务器自然会返回无效请求错误。

另外还有个小优化点：HttpClient.post会自动帮你序列化JSON数据，不需要手动调用JSON.stringify(details)，直接传入原始对象即可，手动序列化反而可能引发格式问题。

修正后的代码 #

submitEnquiry(details): Observable<any> { 
  // 正确创建HttpHeaders：链式调用append，每次append都会返回新实例
  let headers = new HttpHeaders()
    .append('Content-Type', 'application/json')
    .append('Authorization', 'Bearer '+this.authService.token); 

  console.log(details); 
  // 直接传入details对象，HttpClient会自动序列化
  return this.httpClient.post<any>(
    `${this.apiUrl}api/enquiry/request?token=${this.authService.token}`, 
    details,
    {headers: headers}
  ); 
}

额外补充说明 #

1. 对比第一种方法：第一种用的是旧Http模块的Headers类，它是可变对象，append()会直接修改原实例，这就是第一种方法能正常工作的原因。而新的HttpClient搭配HttpHeaders的不可变设计，是Angular为了避免意外状态变更特意做的改动。
2. 你同时在URL参数里传递token，又在请求头里加了Authorization Bearer token，这属于冗余操作。建议统一成一种方式（优先用Authorization请求头，更符合REST接口规范），避免服务器端逻辑混淆。

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