CloudFront Viewer Request Lambda@Edge授权后无法加载S3 Angular应用

背景 #

通过绑定自定义域名的CloudFront访问S3存储桶托管的Angular应用，原本可正常加载。添加Viewer Request类型的Lambda@Edge用于用户授权校验：未授权时自动重定向至Cognito托管UI，初始逻辑运行正常。

问题现象 #

用户在Cognito登录成功后，携带code参数重定向回www.my-domain.com?code=cognito-access-code，Lambda@Edge检测到code参数后放行请求，但浏览器仅显示空白页面，S3中的Angular应用未加载，且浏览器控制台无报错信息。

Lambda@Edge核心逻辑 #

Lambda函数会检查请求的两个标识：

• 请求头中是否存在Authorization字段
• 查询参数中是否存在code参数

只要满足其中一个条件就放行请求，否则重定向至Cognito登录页。

排查过程与修复方案 #

• 验证请求有效性：用Postman直接请求带code参数的域名，能正常返回Angular应用的完整内容，说明核心请求链路无问题。
• 定位根本原因：进一步排查发现，浏览器加载main.js、styles.css等静态资源时，这些请求既没有携带Authorization头，也不会附带code查询参数，被Lambda@Edge判定为未授权请求，直接重定向至Cognito，导致静态资源加载失败，最终页面空白。
• 修复措施：调整Lambda@Edge的逻辑，增加静态资源白名单判断——当请求路径匹配.js、.css、.png、.svg、.ico等常见静态资源后缀时，直接放行请求，跳过授权校验。

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