React前端部署AWS CloudFront后遇AccessDenied错误，求排查解决

常见原因 #

• CloudFront分发的源配置错误，比如指向的S3桶权限不足、源域名或路径有误
• S3桶的Bucket Policy未授权CloudFront访问桶内对象
• CloudFront未设置默认根对象（React单页应用需指向index.html）
• Origin Access Identity（OAI）配置缺失或不正确，导致CloudFront无法访问S3源
• React构建后的静态文件未完整上传到S3，或文件路径、名称有误（S3区分大小写）

对应解决步骤 #

1. 检查CloudFront源配置 #

确认分发的源是正确的S3资源：

• 如果用S3静态网站托管，源域名要选S3的静态网站端点（格式类似your-bucket.s3-website-region.amazonaws.com），而非REST API端点；
• 检查源路径是否匹配S3中静态文件的存放位置，避免误填子目录。

2. 配置S3 Bucket Policy授权CloudFront访问 #

如果使用OAI，在S3桶的权限中添加以下Policy（替换占位符为实际值）：

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

生产环境不建议直接设置S3桶公开可读，优先用OAI方式授权。

3. 设置CloudFront默认根对象 #

进入CloudFront分发的“常规”设置，找到“默认根对象”，填入index.html——React单页应用访问根路径时，需要CloudFront返回这个入口文件。

4. 验证OAI配置 #

确认CloudFront源设置中已启用Origin Access Identity，并且S3桶的权限已关联该OAI；如果中途更换过OAI，需重新更新Bucket Policy。

5. 检查React静态文件部署状态 #

确认执行npm run build生成的build文件夹内所有文件（包括index.html）都完整上传到S3桶的对应路径，注意文件名大小写（比如Index.html和index.html在S3中是不同文件）。

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