自定义域名下CloudFront签名URL的S3资源丢失CORS Access-Control-*头

问题现象 #

通过REST API返回302重定向到CloudFront签名URL，提供S3存储桶内的静态资源。前端获取资源时触发CORS错误：

• OPTIONS预检请求能正常返回预期的CORS响应头
• 后续的GET请求完全缺失access-control-*系列响应头，浏览器报错

OPTIONS请求响应（正常） #

Status: 200
access-control-allow-credentials: true
access-control-allow-headers: x-client-version
access-control-allow-methods: GET, HEAD
access-control-allow-origin: https://subdomain.version_number.domain.extension
access-control-expose-headers: Access-Control-Allow-Origin

GET请求浏览器报错 #

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [signed_url] (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

curl测试正常 #

用curl携带正确Origin头请求签名URL，响应包含完整CORS头：

curl -H "Origin: https://subdomain.version_number.domain.extension" --verbose "[signed_url]"

响应内容：

> Host: mybucket.anotherdomain.com
> User-Agent: curl/8.5.0
> Accept: */*
> Origin: https://subdomain.version_number.domain.extension
> Access-Control-Request-Method: GET
> 
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
< HTTP/2 200 
< content-length: 0
< date: Fri, 21 Jun 2024 15:22:50 GMT
< access-control-allow-origin: https://subdomain.version_number.domain.extension
< access-control-allow-methods: GET, HEAD
< access-control-expose-headers: Access-Control-Allow-Origin
< access-control-allow-credentials: true
< vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
< server: AmazonS3
< x-cache: Miss from cloudfront
< via: 1.1 [].cloudfront.net (CloudFront)
< x-amz-cf-pop: []
< x-amz-cf-id: []

当前配置详情 #

CloudFront分发基础配置 #

源及源组：my_s3_bucket
查看器协议策略：仅HTTPS
允许的HTTP方法：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
限制查看器访问：是 -> 已为存储桶分配可信密钥组

CloudFront行为设置 #

缓存键策略 #

源请求策略 #

响应头策略 #

S3存储桶CORS配置 #

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://subdomain.version_number.domain.extension"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

S3存储桶CloudFront访问策略 #

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity[ID]"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my_s3_bucket/*"
        }
    ]
}

解决方法 #

• 缓存键策略添加Origin头：确保Origin头被包含在缓存键中，避免CloudFront返回不带CORS头的通用缓存响应。
• 源请求策略转发Origin头：配置源请求策略转发Origin头到S3，让S3能根据请求Origin返回对应CORS头。
• 响应头策略强制配置CORS头：在CloudFront响应头策略中手动添加Access-Control-Allow-Origin、Access-Control-Allow-Credentials等头，同时添加Vary: Origin确保缓存区分不同Origin请求。
• 清除CloudFront缓存：修改配置后手动清除现有缓存，避免旧响应继续生效。
• 确认前端请求配置：确保前端请求设置withCredentials: true（若需携带Cookie），且302重定向后浏览器自动传递Origin头。

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