配置CloudFront与S3桶遇403访问拒绝：非首页刷新报错

问题现象 #

通过CloudFront映射的URL访问首页（index.html）正常，但访问其他页面后刷新浏览器，出现403访问拒绝错误，错误信息如下：

<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>6NYF5R63KS7PFW89</RequestId>
    <HostId>
        bfVPlbFcw8tSr0CnMIEyRiLeTw3CrAOc7d6v8xw1YGl0YoIr1yWO7tgTQDsqKI5NdU0D0t9a/EU=
    </HostId>
</Error>

已完成的配置：

• 配置了S3桶策略，仅允许指定CloudFront分发访问：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadOnly",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mybucket/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::XXXXXXXXX:distribution/XXXXXXX"
                }
            }
        }
    ]
}

• 禁用了S3公共访问设置，确保无法直接访问S3桶内容

问题原因 #

这类问题大多出现在单页应用（SPA）场景：前端路由（如/about、/dashboard）是由前端框架在浏览器端处理的，刷新页面时，CloudFront会将当前路径当作S3中的实际对象去请求，但S3桶中并没有对应路径的文件（只有根目录的index.html），因此S3返回403错误，CloudFront直接将该错误返回给用户。

解决步骤 #

1. 配置CloudFront自定义错误响应 #

这是核心解决步骤，让CloudFront将403错误重定向到index.html，由前端框架处理路由：

• 登录AWS CloudFront控制台，找到对应的分发
• 切换到「错误页面」标签页，点击「创建自定义错误响应」
• 按以下参数配置：
  • HTTP错误代码：选择403 Forbidden
  • 缓存TTL（秒）：设置为300（可根据实际需求调整，比如设为0确保实时生效）
  • 自定义响应页面路径：输入/index.html
  • HTTP响应代码：选择200 OK
• 保存配置，等待CloudFront分发更新（通常需要5-30分钟，可在「分发」列表查看状态）

2. 验证CloudFront与S3的访问权限配置 #

• 确认使用的是Origin Access Control（OAC）（当前AWS推荐方式），而非旧版Origin Access Identity（OAI）
• 检查桶策略中的AWS:SourceArn是否与你的CloudFront分发ARN完全一致，避免拼写错误
• 确保桶策略的Resource字段为arn:aws:s3:::mybucket/*，允许CloudFront获取桶内所有对象

3. 可选：配置S3静态网站托管（配合使用） #

如果启用了S3静态网站托管，可将「索引文档」和「错误文档」都设置为index.html，进一步确保路由兼容性（注意：因已禁用公共访问，该配置仅作为CloudFront的补充，不会开放直接访问）

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