配置ALB+Cognito托管UI后，Angular v12如何获取请求头？

核心问题 #

ALB完成Cognito认证后，会把x-amzn-oidc-*系列字段作为请求头转发给Angular的托管服务器，但Angular作为客户端框架，只能读取浏览器返回的响应头，无法直接获取ALB发给服务器的请求头。

具体解决步骤 #

1. 配置托管服务器转发请求头到响应头 #

如果Angular部署在Nginx这类Web服务器上，修改Nginx配置，将ALB的请求头复制到响应头，并允许前端访问这些头：

server {
    # 保留原有Angular部署配置
    location / {
        # 复制ALB发送的认证请求头到响应头
        add_header X-Amzn-Oidc-Userdata $http_x_amzn_oidc_userdata;
        add_header X-Amzn-Oidc-Accesstoken $http_x_amzn_oidc_accesstoken;
        add_header X-Amzn-Oidc-Identity $http_x_amzn_oidc_identity;
        # 声明允许前端读取这些响应头
        add_header Access-Control-Expose-Headers "X-Amzn-Oidc-Userdata,X-Amzn-Oidc-Accesstoken,X-Amzn-Oidc-Identity";
        
        # 其他Angular相关配置（比如try_files处理路由）
        try_files $uri $uri/ /index.html;
    }
}

如果部署在S3静态托管，需搭配CloudFront，通过Lambda@Edge的Origin Response触发器，将ALB的请求头复制到响应头，并设置Access-Control-Expose-Headers。

2. 在Angular中读取响应头 #

修改HTTP请求逻辑，通过observe: 'response'获取完整响应对象，进而读取目标头：

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

constructor(private http: HttpClient) {}

fetchAuthData() {
    // 发送请求时指定observe为response，才能获取完整响应头
    this.http.get('/path-to-your-app', { observe: 'response' }).subscribe(resp => {
        const userData = resp.headers.get('X-Amzn-Oidc-Userdata');
        const accessToken = resp.headers.get('X-Amzn-Oidc-Accesstoken');
        const identity = resp.headers.get('X-Amzn-Oidc-Identity');
        // 处理获取到的认证信息
    });
}

3. 验证ALB监听器配置 #

确认ALB的认证监听器已开启转发认证上下文：

• 进入AWS控制台的ALB监听器设置
• 找到Cognito认证的规则，确认“转发认证上下文”选项已勾选，确保ALB会将x-amzn-oidc-*系列头转发给目标服务器

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