Angular、CloudFront、OAI - 返回的存储桶中的顶级对象，但不是带有路径的对象答案

【问题标题】：Angular, CloudFront, OAI - top level objects in bucket returned, but not objects with pathsAngular、CloudFront、OAI - 返回的存储桶中的顶级对象，但不是带有路径的对象
【发布时间】：2021-10-10 21:28:23
【问题描述】：

我有一个具有以下来源的 CloudFront 分配：

my-bucket.s3.us-east-1.amazonaws.com

注意：当我在存储桶上启用静态 Web 托管时，我尝试使用包含 .s3-website 而不是 .s3 的“静态 Web 托管格式”，但这只会导致 403时间。

另请注意：我将 Origin Path 留空，因为当我将其设置为 /index.html 时，会导致 403s。

并且它对存储桶具有 OAI 权限。我已经验证桶策略是正确的：

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

CloudFront 分配有以下错误页面：

HTTP error code | Minimum TTL (seconds) | Response page path | HTTP response code
403               10                      /index.html          200
404               10                      /index.html          200

存储桶包含 Angular 应用程序的 dist 输出，其中包含顶层的所有脚本、样式、favicon、清单等，以及路径 /assets/icons/icon-XXxXX.png 下的图标。就目前而言，由于（大部分）应用程序组件被正确返回，我没有启用静态网络托管。

除了所有的脚本、样式、favicon 和 webmanifest 都在应用程序请求时返回之外，一切都像魅力一样工作，对图标的请求不会返回 png 图标，而是返回此响应：

Please enable JavaScript to continue using this application.

这告诉我，对 app.com/assets/icons/icon-XXxXX.png 的请求会导致 403 并被分发的 403 错误处理程序捕获，只是返回 index.html，尽管存储桶顶层的应用程序组件已正确返回。

我已经用尽了谷歌，我尝试的每一次调整最终都会导致周围的 403。

谁能帮我弄清楚为什么只是资产未能正确归还？

【问题讨论】：

标签： angular amazon-web-services amazon-s3 amazon-cloudfront

【解决方案1】：

原来是 Chrome 缓存了我的发行版以前版本的资产的响应，但它没有正确返回。禁用缓存解决了这个问题。也许这会帮助其他有同样头痛的人。

【讨论】：