CloudFront安全Cookie认证失败返回403时无CORS头，XHR无法读取错误

你遇到的这个问题挺常见的——CloudFront在源站转发前就拦截请求返回403时，确实不会自动带上源站的CORS头，这会导致前端XHR请求因为跨域问题没法正确解析错误响应。不过我们可以通过CloudFront Functions或者Lambda@Edge来手动添加这些头，下面是具体的实现方案：

方法一：用CloudFront Functions（推荐，轻量低成本） #

CloudFront Functions是CloudFront原生的轻量函数，适合处理简单的响应头修改，成本比Lambda@Edge低很多，延迟也更小。

1. 创建一个CloudFront Function，选择Viewer Response事件类型，然后粘贴以下代码：

function handler(event) {
    const response = event.response;
    const request = event.request;
    
    // 仅针对403状态码添加CORS头
    if (response.statusCode === 403) {
        // 获取请求中的Origin头，如果没有则设为你的允许域名（比如https://your-frontend.com）
        const allowedOrigin = request.headers.origin ? request.headers.origin.value : "https://your-frontend.com";
        
        response.headers['access-control-allow-origin'] = { value: allowedOrigin };
        response.headers['access-control-allow-credentials'] = { value: 'true' };
        // 如果需要其他CORS头，比如Allow-Methods、Allow-Headers，也可以在这里添加
        response.headers['access-control-allow-methods'] = { value: 'GET, POST, OPTIONS' };
        response.headers['access-control-allow-headers'] = { value: 'Content-Type, Authorization' };
    }
    
    return response;
}

2. 保存并发布这个函数，然后关联到你的CloudFront分发：
   • 进入CloudFront分发的Behaviors标签
   • 编辑对应的行为，在Function associations部分，选择Viewer Response，然后选择你刚创建的函数

方法二：用Lambda@Edge（适合复杂逻辑） #

如果你的场景需要更复杂的处理逻辑（比如根据不同来源动态调整CORS规则），可以用Lambda@Edge：

1. 创建一个Node.js的Lambda函数（要在us-east-1区域创建），代码如下：

exports.handler = async (event) => {
    const response = event.Records[0].cf.response;
    const request = event.Records[0].cf.request;
    
    if (response.status === 403) {
        const allowedOrigin = request.headers.origin ? request.headers.origin[0].value : "https://your-frontend.com";
        
        response.headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: allowedOrigin }];
        response.headers['access-control-allow-credentials'] = [{ key: 'Access-Control-Allow-Credentials', value: 'true' }];
        response.headers['access-control-allow-methods'] = [{ key: 'Access-Control-Allow-Methods', value: 'GET, POST, OPTIONS' }];
        response.headers['access-control-allow-headers'] = [{ key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' }];
    }
    
    return response;
};

2. 发布这个Lambda函数，然后将它关联到CloudFront分发的Viewer Response事件（步骤和CloudFront Functions类似）

关键注意事项 #

• 如果你需要支持带凭据的跨域请求（比如Cookie、HTTP认证），Access-Control-Allow-Origin不能设为*，必须和请求的Origin头匹配，或者指定具体的允许域名
• 测试的时候可以用curl命令模拟请求，比如：

  curl -H "Origin: https://your-frontend.com" -I https://your-cloudfront-domain.com/protected-file
  

  检查返回的响应头是否包含正确的CORS头
• 确保你的CloudFront行为已经配置了正确的Cookie转发规则，这样认证逻辑才能正常工作

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