Angular 通过组件访问门户时重定向到 403 URL

Question

我是 aws 和 angular 的新手。该门户托管在 aws cloudfront 和 s3 存储桶上。根页面的 url 工作正常，但是当我尝试从不同的 url（特定组件的）访问门户时，它会重定向到禁止的 403 页面。

场景：用户被重定向以在第三方应用程序的不同页面上添加一些详细信息。当该应用程序重定向到成功页面时，门户将被重定向到 403 页面。

它托管在 cloudfront 和 s3 上，其中存储桶策略设置为阻止 public 访问。难道是因为那个？如果我们需要将政策保密，如何解决这个问题？

感谢您的宝贵时间。

Answer 1

您需要在 CloudFront 或 S3 级别实施重定向规则。发生这种情况是因为分配给 non-root 组件的路由在 S3 中不存在，它们实际上仅驻留在浏览器的运行时中。因此 S3 / CloudFront 以 404/403 状态代码响应。

为了解决这个问题，需要在 S3 或 CloudFront 层中实施重定向规则。有几种方法可以做到这一点：

如果您手动设置了 S3 静态站点，则可以按照本指南进行手动配置：
如果您已通过 Terraform 配置存储桶，我建议为重定向规则添加路由规则。

resource "aws_s3_bucket" "main_bucket" {
  bucket = join("-", [var.project_name, "website-main-s3"])
  acl    = "private"

  server_side_encryption_configuration {
    rule {
      apply_server_side_encryption_by_default {
        sse_algorithm = "AES256"
      }
    }
  }

  # Redirect rules for 404 and 403
  # Assuming the logical routes are the primary cause of the 404 and 403 hits.
  routing_rules = <<EOF
    [{
        "Condition": {
          "HttpErrorCodeReturnedEquals": "403"
        },
        "Redirect": {
          "ReplaceKeyWith": "index.html"
        }
    },
    {
        "Condition": {
          "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
          "ReplaceKeyWith": "index.html"
        }
    }]
  EOF

  tags = {
    Name        = join("-", [var.project_name, "website-main-s3"])
    Environment = var.environment
  }
}

就像我分享的 terraform 模板一样，也有一些方法可以使用 AWS CDK 和 Cloud Formation

如果您喜欢我正在使用的 terraform 模板的完整副本，可以按照 Github

中的示例进行操作

PS：您可能还需要考虑检查您的 CloudFront 的 OAI 是否有足够的权限将 non-root 组件拉入您的存储桶.如果您说根路径服务良好，则此问题的可能性很低。

Answer 2

您可以通过两种方式完成：

选项 1 - 通过 S3 存储桶静态 Web 托管配置只需按照@Allan Chua

所述添加路由规则

选项 2 - 通过云端分发配置只需添加自定义错误页面：

Error code: 403, Response page path: index.html, Response code: 200
Error code: 404, Response page path: index.html, Response code: 200

如果可以通过云端和 S3 访问网页，选项 1 就可以了 URL 如果您只想限制对云端的访问 URL，请使用选项 2（使用 Origin 访问身份以允许云端访问 S3 存储桶）

Angular 通过组件访问门户时重定向到 403 URL

Angular redirects to 403 when accessing the portal through a component URL

amazon-s3

amazon-web-services

amazon-cloudfront

angular-routing

angular