Angular 在 AWS 上托管的应用程序重定向拒绝访问，因为云端在 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-error-403/ 之后创建了 S3 存储桶 public 并添加如下的存储桶策略

{
    "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 和 200 的 HTTP 响应代码 。保存它。

它应该是这样的：

无需制作桶public，依赖为您生成的Policy CF。

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

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

Angular 在 AWS 上托管的应用程序重定向拒绝访问，因为云端在 S3 之前

Angular application hosted on AWS redirection gives access denied having cloudfront ahead of S3

amazon-s3

amazon-web-services

amazon-cloudfront

angular-ui-router

angular