通过Cognito与Lambda@Edge的CloudFront页面加载返回CORS错误

问题根源 #

未授权用户访问受保护资源时，Lambda@Edge将请求重定向到Cognito授权端点，浏览器把该重定向请求判定为跨域请求，但Cognito默认响应未携带允许你域名的Access-Control-Allow-Origin头，导致CORS拦截。

排查与解决步骤 #

• 调整Lambda@Edge的重定向范围
  检查Viewer Request触发器的Lambda逻辑，确认是否误将静态资源（图片、CSS、JS等）纳入了授权拦截范围。如果是，给这类资源添加白名单：比如匹配/images/*、/static/*等路径时，直接放行请求，不触发Cognito重定向。这是最根本的解决方案，因为静态资源通常无需用户授权即可访问。

• 配置Cognito的CORS规则
  若确实需要对静态资源做授权验证，需在Cognito用户池的App客户端设置中：

  1. 将你的网站域名添加到「允许的回调URL」列表；
  2. 在用户池的CORS设置里，把网站域名加入「允许的源（Origin）」，并启用CORS支持。

• 修正S3与CloudFront的CORS配置

  1. 检查S3桶的CORS策略，确保允许你的网站域名作为Origin，示例配置：

     [
       {
         "AllowedHeaders": ["*"],
         "AllowedMethods": ["GET", "HEAD"],
         "AllowedOrigins": ["https://你的网站域名.com"],
         "ExposeHeaders": []
       }
     ]
     

  2. 在CloudFront对应的行为设置中，启用转发Origin请求头到S3（可通过自定义原点请求策略实现），这样S3才能根据请求的Origin返回正确的CORS响应头。

• 通过Lambda@Edge补充Cognito重定向的CORS头
  如果必须保留静态资源的授权拦截，可在Lambda@Edge的Viewer Response触发器中，针对Cognito的重定向响应添加CORS头：

  exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response;
    const headers = response.headers;
  
    // 仅对Cognito重定向响应添加CORS头
    if (response.status === '302' && headers.location[0].value.includes('amazoncognito.com/authorize')) {
      headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: 'https://你的网站域名.com' }];
      headers['access-control-allow-methods'] = [{ key: 'Access-Control-Allow-Methods', value: 'GET, HEAD' }];
    }
  
    callback(null, response);
  };
  

• 临时 workaround：修改前端请求模式
  若仅需展示静态资源无需处理响应内容，可在前端请求时设置no-cors模式：

  fetch('/images/background-forest-left.jpg', { mode: 'no-cors' });
  

  注意：此方案会让浏览器屏蔽响应内容，仅适用于纯展示场景。

内容的提问来源于stack exchange，提问作者Danny Ellis Jr.