Angular 15如何获取响应头并保持商品列表为Observable？

1. 修正服务端API的请求配置 #

你之前把observe: 'response'放在HttpHeaders里是错误的，这个配置属于HTTP请求的选项参数，不是请求头。修改服务中的getPagedCommodities方法，让它返回包含完整响应的Observable：

/** GET Paged commodities from the server ===============================*/
getPagedCommodities(pageSize: number, pageNumber: number): Observable<HttpResponse<CommodityForList[]>> {
  let params: HttpParams = new HttpParams();
  params = params.append('pageSize', pageSize);
  params = params.append('pageNumber', pageNumber);

  // observe: 'response' 用来获取完整的HTTP响应（包含头信息）
  return this.http.get<CommodityForList[]>(this.baseUrl + '/getPagedCommodities/', {
    params,
    observe: 'response' // 关键：放在options里，不是headers
  });
}

2. 组件中分离商品列表Observable与分页总数 #

在组件里，使用RxJS的map操作符提取响应体作为商品列表的Observable，同时用tap操作符读取响应头并设置分页器的length：

import { map, tap } from 'rxjs/operators';

// 保持商品列表为Observable<CommodityForList[]>
commoditiesForList$!: Observable<CommodityForList[]>;

// 调用服务方法并处理响应
this.commoditiesForList$ = this.commoditiesService.getPagedCommodities(this.pageSize, this.pageIndex + 1).pipe(
  tap(response => {
    // 从响应头获取分页总数，注意要先确保后端暴露了这个头
    const paginationHeader = response.headers.get('X-Pagination');
    if (paginationHeader) {
      // 假设X-Pagination是JSON格式的字符串，比如{"totalCount": 100}，需要解析
      const paginationData = JSON.parse(paginationHeader);
      this.paginator.length = paginationData.totalCount;
    }
  }),
  // 映射出响应体，让commoditiesForList$保持为商品列表的Observable
  map(response => response.body!)
);

3. 后端关键配置（ASP.NET Core） #

要确保客户端能读取到X-Pagination响应头，需要在ASP.NET Core的后端配置中添加跨域暴露头：

在Startup.cs（.NET 5）的ConfigureServices方法里：

services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.WithOrigins("你的前端域名")
              .AllowAnyMethod()
              .AllowAnyHeader()
              .ExposeHeaders("X-Pagination"); // 关键：暴露自定义响应头
    });
});

然后在Configure方法里启用CORS：

app.UseCors("AllowAll");

这样处理后，你既可以直接在模板中使用async管道绑定commoditiesForList$（满足动态搜索的Observable需求），又能正确获取到响应头中的分页总数来设置mat-paginator的length属性。

内容的提问来源于stack exchange，提问作者R. Nourmandi