ReactJS应用部署在CloudFront后私有S3桶出现403错误排查

核心配置问题 #

你当前的问题出在CloudFront使用S3静态网站托管端点作为源，但桶策略里用了AWS:SourceArn条件限制访问。S3静态网站托管端点（格式如http://<bucket-name>.s3-website-<region>.amazonaws.com）是基于HTTP的网站访问模式，这种模式下的请求不会携带CloudFront分发的ARN信息，导致桶策略中的StringEquals: AWS:SourceArn条件无法匹配，最终被拒绝访问，返回403。

如果要保持S3桶私有，同时让CloudFront正常访问，有两种修正方式：

方式1：改用S3 REST API端点作为CloudFront源（推荐） #

1. 将CloudFront的源从静态网站托管端点改为S3 REST API端点（格式为arn:aws:s3:::<bucket-name>或直接选择S3桶作为源）
2. 确保已正确关联Origin Access Control（OAC）到该分发
3. 调整桶策略为适配OAC的格式（将版本改为2012-10-17，新版本支持更完善的权限验证）：

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::workflow-builder.lotusflare.net/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::xxxx:distribution/xxxx"
                }
            }
        }
    ]
}

（注：将xxxx替换为你的AWS账号ID和CloudFront分发ID）

方式2：保留静态网站托管端点，调整桶策略条件 #

如果必须使用静态网站托管端点，需要将桶策略的条件改为允许CloudFront的IP段访问：

1. 获取CloudFront的官方IP地址范围
2. 在桶策略中添加IpAddress条件：

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontIPs",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::workflow-builder.lotusflare.net/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": [
                        "192.0.2.0/24",
                        "198.51.100.0/24"
                    ]
                }
            }
        }
    ]
}

（注：替换为实际的CloudFront IP段）
这种方式安全性低于OAC，因为IP段可能会定期更新，需要同步维护。

排查步骤 #

• 确认CloudFront源类型：检查分发的源配置，若使用的是S3静态网站托管端点，直接触发桶策略条件不匹配问题，需按上述方式调整。
• 验证OAC关联状态：进入CloudFront分发的源设置，确认已正确关联创建好的OAC，且OAC权限设置为允许访问目标S3桶。
• 检查桶策略版本：当前使用的2008-10-17版本权限模型较旧，建议升级为2012-10-17，避免权限兼容问题。
• 测试直接访问S3端点：尝试直接访问S3静态网站托管端点，若也返回403，说明桶内对象的访问权限未被正确授权，需结合桶策略调整。
• 刷新CloudFront缓存：旧缓存可能保留403响应，手动刷新分发缓存（路径填/*）后再次测试。
• 查看访问日志：
  • 开启CloudFront访问日志，查看sc-status和x-edge-detailed-result-type字段，判断是源拒绝还是缓存问题。
  • 开启S3访问日志，查看error-code字段，确认是桶策略拒绝还是其他权限问题。

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