cloudfront 后面的私有 s3 存储桶上托管的 Reactjs 应用程序出现 403 问题

Question

我有以下设置：

1. ReactJS 应用程序托管在 s3 静态 Web 托管上，错误重定向到

   /index.html

2. 存储桶已禁用公共访问
3. 云端通过静态网络托管端点连接到存储桶
4. 云端已经启用了 OAD

桶有一个政策：

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": "*",
            "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。

我还可以通过云前端连接到自定义错误页面，对于 403 错误，使用 200 响应代码重定向到

/

。

但是通过上述设置，cloudfront url 仍然得到 403。

如果我打开存储桶的公共访问，云前端将成功工作，但是，我必须将存储桶放在公共访问后面。

我想知道缺少什么，或者验证的过程是什么？

Answer 1

当您在尝试访问 S3 存储桶时收到来自 CloudFront 的 403 Forbidden 错误时，通常意味着 CloudFront 无权访问您的 S3 存储桶中的文件。以下清单可帮助您排查并解决此问题：

1. 存储桶策略：仔细检查您的存储桶策略是否已正确设置以允许访问 CloudFront。确保

   AWS:SourceArn

   正确设置为您的 CloudFront 分配的 ARN。看起来您已经完成了此操作，但值得确认没有拼写错误或遗漏。

2. 对象所有权：确保 S3 对象归 CloudFront 分配所属的账户所有。如果没有，您需要更新所有权或使用允许访问其他帐户拥有的对象的存储桶策略。

3. IAM 角色：如果您使用源访问身份 (OAI)，请确保其配置正确。您需要更新您的存储桶策略以允许 OAI 访问您存储桶中的对象。

   • 将 CloudFront 原始访问身份添加到您的存储桶策略：

     "Principal": {
         "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity YOUR_OAI_ID"
     }
     

4. CloudFront Origin：检查您的 CloudFront 分配的源设置。确保您在源设置中使用源访问身份，并且如果您使用 S3 静态网站托管，则指向 S3 存储桶的网站终端节点。

5. 对象的权限：确保 S3 存储桶中的对象具有适当的权限。它们需要可由您设置的原始访问身份读取。

6. CloudFront 错误页面：确认您已在 CloudFront 中设置自定义错误页面来处理 403 错误，并且响应代码设置为 200。

7. TTL 设置：如果您最近对 S3 存储桶策略或对象权限进行了更改，请确保 CloudFront 分配上的 TTL（生存时间）设置已设置，以使更新的权限生效。您可能需要使缓存失效。

8. 检查日志：为 S3 存储桶和 CloudFront 启用日志记录。检查这两个服务的访问日志，看看是否有任何其他线索说明访问被拒绝的原因。

9. SSL/TLS 证书：如果您为 CloudFront 分配使用带有 HTTPS 的自定义域，请确保您的 SSL/TLS 证书有效且配置正确。

10. DNS 配置：确保您的 DNS 设置正确地将您的域指向 CloudFront 分配。

如果您已检查所有这些内容，但仍然遇到问题，您可能需要使用 AWS 支持或社区论坛来获取有关您的设置的具体详细信息，以获得更个性化的帮助。