Angular 路由不适用于 cloudfront + s3

标签 angular amazon-s3 amazon-cloudfront

目前我的应用程序在云端只有应用程序启动时的默认路由加载。当我使用 cloudfront.[address].net 进入站点的根目录时,它会起作用我还使用 WAF 将其限制为仅我的 IP 地址,但是当我进入 cloudfront.[address] 时。 net/signup 或/login 然后我得到

enter image description here

我怎样才能让子路由也起作用?我有我的桶政策

桶策略

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

我阻止了所有公共(public)访问,但我也在使用带有 OAI 的云端,所以我认为我不需要担心它被阻止,因为它是通过云端访问的。

enter image description here

感谢您的帮助!

最佳答案

您需要将云端分发的错误文档设置为您的入口文档(index.html)

请确保您已完成以下步骤。

  1. 仅允许 Cloudfront 执行 GetObject 的 S3 存储桶策略
  2. 对于 HTTP 404403 错误代码,Cloudfront 分发的自定义错误响应设置为 /index.html
  3. Cloudfront 分布处于 deployed 状态,因为 cloudfront 可能需要更长的时间,我们很容易出现观察错误

希望这对您有所帮助。

关于 Angular 路由不适用于 cloudfront + s3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59618161/

相关文章:

windows - AWS 命令​​行界面无法找到凭证 - 特殊权限

php - 如何提供来自 s3 的静态/媒体内容(仅)和来自 EC2 的其他内容?

amazon-web-services - 在 cloudfront 上启用 Brotli 压缩

javascript - AWS Lambda : Unable to import module 'mail' : No module named mail

angular - Nativescript:未知 URL 的 HTTP 失败响应

angular - 如何通过 firebase 异步更新 ng2-charts 中的值

html - 当内部有 2 个或更多组件时,为什么我的 Angular 应用程序无法正确设置背景?

amazon-web-services - 同一 CloudFront 分配中的多个 S3 存储桶

php - 将我的 LAMP 移至亚马逊

javascript - 更新 ngx-translate 加载器中的翻译