angular - CloudFront 上用于 Angular 应用程序的“NoSuchKey”代码

Question

我创建了一个 Angular 应用程序并将其上传到存储桶 S3 上。
然后我部署了一个 CloudFront 来访问我的网站，但是当我想要访问我的网站的路线(如/login 路线)时，我遇到了错误“NoSuchKey”:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
    <Code>NoSuchKey</Code>
    <Message>The specified key does not exist.</Message>
    <Key>login</Key>
    <RequestId>2F89DD7BB599262C</RequestId>
    <HostId>
        xAEaJF0CRv9Ec9iKtHJ0i+nS8U4nqGCOFHL0vyOEim5MgQiNPqeQNIsxXdTYJdT+MlaYt6l6YJE=
    </HostId>
</Error>

这是我对 Bucket S3 的设置:
Properties
和 Policies

这是我对 CloudFront 的设置:
CloudFront settings

我知道此错误是由于我的存储桶中不存在 '/login' 路由，但我不明白如何对我的 CloudFront 说“将此存储桶用作网站而不是用作存储桶或类似的东西”。

你们知道我该如何解决这个问题吗？

问我是否需要任何细节或更多信息。

谢谢，
Jb

Answer 1

转到 CloudFront -> 错误页面 -> 创建自定义错误响应

在 HTTP 错误代码中选择 404。选中“自定义错误响应”单选按钮。在响应页面路径中输入您的默认路由(例如/index.html)。在 HTTP 响应代码中选择 200。等待 CloudFront 更新，这可能需要几分钟时间。