Angular中HTTP GET请求头设置无效，无请求头导致API空响应

看起来你遇到的问题是自定义请求头没有被正确添加到HTTP GET请求中，导致API返回空响应。咱们一步步排查和解决：

1. 修复HttpHeaders的创建方式 #

Angular的HttpHeaders是不可变对象，虽然直接用对象初始化在某些场景下可行，但更可靠的方式是使用set()方法来添加头信息，同时要确保头的值是字符串类型（因为HTTP头的键值对都要求是字符串）：

// 正确创建请求头
const headers = new HttpHeaders()
  .set('x-email', '1') // 把数字转为字符串格式
  .set('x-from', '1577836800')
  .set('x-to', '1598659200');

return this.http.get<any>(`${environment.apiUrl}/User/getTrips`, { headers })
  .subscribe(data => {
    if (!data) {
      this.rowData = [];
      this.errorMsg = data?.['Error'] || '无返回数据';
    } else {
      this.rowData = data.slice(1);
      this.gridOptions.rowData = data;
      this.gridOptions.api?.refreshCells({ force: true });
    }
  });

2. 检查后端CORS配置 #

如果上面的修改后仍然看不到请求头，大概率是CORS预检请求的问题。浏览器在发送带自定义头的请求前，会先发送一个OPTIONS请求到后端，后端需要在响应中包含Access-Control-Allow-Headers字段，明确允许这些自定义头：

比如后端（以Node.js/Express为例）需要添加类似配置：

app.use(cors({
  allowedHeaders: ['x-email', 'x-from', 'x-to', 'Content-Type'], // 包含你的自定义头
  origin: '*' // 根据实际业务设置允许的域名，不要直接用*在生产环境
}));

如果后端没有配置这些允许的头，浏览器会拦截实际的GET请求，不会携带自定义头，导致API无法识别请求参数，最终返回空响应。

3. 额外的最佳实践 #

• 尽量不要直接在服务中调用subscribe()，而是返回Observable，在组件中订阅，这样更符合Angular的数据流模式：

  // 服务中
  getTrips(): Observable<any> {
    const headers = new HttpHeaders()
      .set('x-email', '1')
      .set('x-from', '1577836800')
      .set('x-to', '1598659200');
    return this.http.get<any>(`${environment.apiUrl}/User/getTrips`, { headers });
  }
  
  // 组件中
  this.tripService.getTrips().subscribe(data => {
    // 处理数据逻辑
  });
  

• 使用可选链操作符（?.）避免undefined报错，比如data?.['Error']和this.gridOptions.api?.refreshCells。

先尝试修改请求头的创建方式，如果还是不行，检查后端的CORS配置，应该就能解决问题了。

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