如何从http.post请求.NET Core Web API返回的响应中读取Bearer Token头信息

实现方案 #

1. 前端请求配置修改 #

Angular 的 HttpClient.post 方法默认仅返回响应体，要获取完整响应对象（包含响应头），需要在请求第三个参数中添加 observe: 'response' 配置，修改后的代码如下：

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

var user = this.http
  .post<User>(this.loginUrl, body, { 
    headers: headers,
    observe: 'response' // 配置返回完整HttpResponse对象
  })
  .pipe(map((response: HttpResponse<User>) => {
    // 读取Authorization响应头
    const authHeader = response.headers.get('Authorization');
    let token = '';
    if (authHeader?.startsWith('Bearer ')) {
      // 提取Bearer后面的Token内容
      token = authHeader.slice(7);
      // 此处可添加Token持久化逻辑，比如存localStorage
      localStorage.setItem('access_token', token);
    }

    // 原逻辑不变，返回响应体的user数据
    const user = response.body;
    // 原有对user的处理逻辑保留
    return user;
  }))

2. 后端.NET Core 必改配置 #

跨域场景下浏览器默认会隐藏未明确声明暴露的响应头，你需要在.NET Core的CORS配置中添加Authorization头的暴露规则，示例配置如下（.NET 6+ 版本写在Program.cs中）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("你的CORS策略名", policy =>
    {
        policy.WithOrigins("http://你的前端域名:端口") // 替换为实际前端地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .WithExposedHeaders("Authorization"); // 核心配置，允许前端读取Authorization头
    });
});

// 别忘了在中间件管道启用CORS
app.UseCors("你的CORS策略名");

注意事项 #

• 如果你的Token存放在自定义响应头（比如X-Token），只需要把上面两处的Authorization替换成你实际使用的头字段名即可
• 确认后端返回的Authorization头格式确实是Bearer <token>，如果格式不同，对应调整Token提取的逻辑即可

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