如何访问API响应的标头参数

我现在将您的代码集成到我自己的Angular/ .NET项目中，并最终找到了一个可以工作的代码：

后端：启动.cs

我必须将X-Pagination添加到CORS策略中，否则它将始终为undefined. Click here to read why this is needed。

services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>
    {
        builder.AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("X-Pagination"); // I had to add this line
    });
});

后端：控制器方法

我不得不将输入参数从PagingParameters pagingParameters更改为[FromQuery] int pageSize, [FromQuery] int pageNumber：

[HttpGet("getPagedCommodities")]
public async Task<IActionResult> GetPagedCommodities([FromQuery] int pageSize, [FromQuery] int pageNumber)
{
    try
    { 
        var commodities = await _repository.Commodity.GetAllCommoditiesAsync();
        var totalCount = commodities.Count();
                
        var pagedCommodities = await _repository.Commodity.GetPagedCommoditiesAsync(pagingParameters);
                
        Response.Headers.Add("X-Pagination", JsonConvert.SerializeObject(totalCount));                

        return Ok(pagedCommodities);
    }
    catch
    {
        return StatusCode(500, "Internal server error");
    }
}

前端：服务方法

通过添加observe: 'response'，将授予对HttpResponse<YourJsonObject>的访问权限，然后您可以通过response.headers.get("Header-Key")获取头值。
我还不得不改变组装httpOptions的方式（这是this.http.get的第二个参数）。

getPagedCommodities(pageSize: number, pageNumber: number): Observable<{commodities: CommodityForList[]; totalCount: number}> {

    const params: HttpParams = new HttpParams()
                                .append('pageSize', pageSize)
                                .append('pageNumber', pageNumber);

    const url = `${this.baseUrl}/getPagedCommodities/`;

    return this.http.get<CommodityForList[]>(url, { observe: 'response', params })
        .pipe(
            map(response => {

            // Access 'total count' in header:
            const totalCount = response?.headers?.get('X-Pagination');
            const parsedTotalCount = +(totalCount ?? 0);

            return { commodities: response?.body ?? [],
                     totalCount: parsedTotalCount };
            })
        );
}

最后，我能够访问返回值，如下所示：

this.getPagedCommodities(0, 1).subscribe(
    res => {
        console.log('Commodities-Array:', res.commodities);
        console.log('Total count:', res.totalCount);
    }
);

您可以将设置observe: 'response'传递给http get以观察整个响应，而不仅仅是主体。

this.http.get(myUrl, {
  observe: 'response',
  params
}).subscribe(response => console.log(response))

现在你得到的不是主体，而是整个响应，其中headers和body是响应的属性：

{
  headers: {
    totalCount: 123
  },
  status: 200,
  body: {}
}