在ASP.NET Core与Angular中传参时如何获取后端HTTP头信息？

第一步：后端配置CORS（跨域场景下必需） #

如果前后端是跨域部署，ASP.NET Core默认不会暴露自定义响应头给前端，需要在CORS配置中显式允许X-Pagination头：

// 在Startup.cs的ConfigureServices方法（ASP.NET Core 5）
services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader()
              .ExposeHeaders("X-Pagination"); // 关键：暴露自定义响应头
    });
});

// 在Configure方法中启用CORS
app.UseCors("AllowAll");

第二步：修改Angular前端代码获取响应头 #

默认情况下Angular HttpClient只返回响应体，要获取响应头需要设置observe: 'response'选项，修改你的getPagedCommodities方法：

import { HttpResponse } from '@angular/common/http';

// 修改方法返回类型为包含响应对象的Observable
getPagedCommodities(pageSize: number, pageNumber: number): Observable<HttpResponse<CommodityForList[]>> {
    let params: HttpParams = new HttpParams()
        .append('pageSize', pageSize)
        .append('pageNumber', pageNumber);
    
    return this.http.get<CommodityForList[]>(
        `${this.baseUrl}/getPagedCommodities/`, 
        { params, observe: 'response' } // 关键：设置observe为'response'
    );
}

第三步：调用方法并读取totalCount #

在组件中调用该方法时，从响应对象的headers中提取X-Pagination值：

this.yourService.getPagedCommodities(10, 1).subscribe({
    next: (response) => {
        // 获取商品列表
        const commodities = response.body;
        // 读取响应头中的totalCount并转为数字
        const totalCount = Number(response.headers.get('X-Pagination'));
        console.log('总商品数:', totalCount);
        // 后续处理分页逻辑
    },
    error: (err) => {
        console.error('获取分页数据失败:', err);
    }
});

可选：封装返回结果（更优雅的方式） #

创建分页结果接口，将数据和总条数封装在一起，方便组件使用：

// 定义分页结果接口
export interface PagedResult<T> {
    data: T[];
    totalCount: number;
}

// 修改服务方法返回封装后的Observable
getPagedCommodities(pageSize: number, pageNumber: number): Observable<PagedResult<CommodityForList>> {
    let params: HttpParams = new HttpParams()
        .append('pageSize', pageSize)
        .append('pageNumber', pageNumber);
    
    return this.http.get<CommodityForList[]>(
        `${this.baseUrl}/getPagedCommodities/`, 
        { params, observe: 'response' }
    ).pipe(
        map(response => {
            return {
                data: response.body || [],
                totalCount: Number(response.headers.get('X-Pagination')) || 0
            };
        })
    );
}

调用时直接拿到封装好的数据：

this.yourService.getPagedCommodities(10, 1).subscribe({
    next: (result) => {
        console.log('商品列表:', result.data);
        console.log('总商品数:', result.totalCount);
    },
    error: (err) => {
        console.error('获取分页数据失败:', err);
    }
});

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