AWS 重定向上托管的 Angular 应用程序在 S3 之前的云前端导致访问被拒绝

Question

我们有一个 Angular 应用程序，它被推送到 AWS S3 存储桶中。我们在 S3 之前有 cloundfront，然后使用 Route53 进行 DNS 更改。 假设我的应用程序可以与 mywebsite.abc.xyz 一起使用，当在浏览器上点击该应用程序时，它会更改为 mywebsite.abc.xyz/sigin。现在，如果我使用 mywebsite.abc.xyz/sigin 地址刷新此地址，则会出现访问被拒绝错误。 但如果我点击 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-error-403/公开了S3存储桶 并添加如下的存储桶策略

{
    "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 发行版中。

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

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

它应该看起来像这样:

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

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

此外，无需配置您的存储桶来为静态网站提供服务，普通存储桶就足够了。