托管在 AWS 重定向上的 Angular 应用程序在 S3 之前提供拒绝访问

Question

我们有一个 angular 应用程序，它被推送到 AWS S3 存储桶中。 我们在 S3 之前有 cloundfront，然后使用 Route53 进行 DNS 更改。 假设我的应用程序可与mywebsite.abc.xyz一起使用，当在浏览器上点击它时，它会更改为mywebsite.abc.xyz/sigin 。 现在，如果我用mywebsite.abc.xyz/sigin的地址刷新它，那么它会给出access denied错误。 但是如果我点击mywebsite.abc.xyz/#/sigin那么它工作正常。

要删除 # 我遵循https://zanon.io/posts/angularjs-with-pretty-urls-removing-the-in-amazon-s3 ，并在 S3 存储桶网站托管中进行了如下更改： 在重定向规则中，我将代码如下

 <RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>mywebsite.abc.xyz</HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

但是在按照上述步骤更改 angular 应用程序之后，我仍然收到错误，然后我在https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-之后公开了 S3 存储桶error-403/并添加如下存储桶策略

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

但仍然是同样的错误。 我不知道如何解决这个问题。 预期的结果是即使我点击mywebsite.abc.xyz/signin/那么它也应该可以工作，而它可以与mywebsite.abc.xyz/#/signin

Answer 1

您需要将自定义错误页面添加到您的 CF 分发中。

Go 到您的发行版，错误页面->创建自定义错误响应。

为响应页面路径设置为index.html和HTTP 响应代码为200的403和404添加自定义规则。 保存。

它应该如下所示：

无需公开存储桶，依赖为您生成的 Policy CF。

这项工作的原因是，当 CF 尝试访问源并获得404或403响应时，它将服务器从index.html获得的任何内容。

此外，无需将您的存储桶配置为服务于 static 网站，普通存储桶就足够了。