部署React单页应用至S3与CloudFront遇Access Denied问题求助

我严格按照AWS官方教程部署React单页应用到S3和CloudFront，使用免费套餐操作，已多次重试验证。确认CloudFormation已创建所有基础设施，文件也已正确上传至S3，但通过CloudFront生成的URL访问时，出现如下错误：

return (<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>{{id}}</RequestId>
<HostId>{{id}}</HostId>
</Error>
)

尝试取消S3存储桶的公共访问阻止（教程未提及该步骤）后仍未解决问题，怀疑教程存在过时、遗漏内容或我理解有误，求解决办法。

排查与修复步骤 #

1. 核对CloudFront Origin Access Control (OAC)配置 #

• 进入CloudFront控制台，找到目标分发，在Origin标签下确认已关联正确的OAC。
• 进入对应S3桶的权限标签，检查是否存在CloudFront OAC自动生成的桶策略。策略需包含允许cloudfront.amazonaws.com服务访问桶内对象的语句，若缺失可手动添加（替换占位符）：

  {
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
      {
        "Sid": "1",
        "Effect": "Allow",
        "Principal": {
          "Service": "cloudfront.amazonaws.com"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::你的桶名/*",
        "Condition": {
          "StringEquals": {
            "AWS:SourceArn": "arn:aws:cloudfront::你的AWS账号ID:distribution/你的CloudFront分发ID"
          }
        }
      }
    ]
  }
  

2. 验证S3静态网站托管设置 #

• 确认S3桶已启用静态网站托管，索引文档和错误文档均设置为index.html（SPA客户端路由需要fallback到首页）。
• 禁止直接使用S3的静态网站URL访问，必须通过CloudFront域名访问。

3. 检查CloudFront缓存行为与错误页面规则 #

• 在CloudFront分发的Behaviors标签，确认默认行为的Viewer Protocol Policy设置为Redirect HTTP to HTTPS或HTTPS Only，避免协议不兼容问题。
• 前往Error Pages标签，添加错误码403和404的自定义响应：将响应页面路径设为/index.html，HTTP状态码设为200。这是SPA部署的关键步骤，教程常遗漏——客户端路由会触发S3的403/404，需要CloudFront重定向到首页处理路由。

4. 确认文件上传状态 #

• 检查S3桶内index.html等核心文件是否存在，且对象所有者为你的AWS账号（避免上传时权限归属错误）。
• 无需开启S3桶的公共访问，CloudFront通过OAC访问私有桶是标准安全做法，开启公共访问反而存在风险。

5. 等待CloudFront部署完成 #

• 确保CloudFront分发状态显示Deployed，修改配置后通常需要5-15分钟生效，不要立即测试。

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