如何修复 AccessDenied 错误 CloudFront Angular 部署的应用程序？

Question

我正在设置一个部署在 S3 上并由 CloudFront 分发处理的 Angular 应用程序。当我访问该应用程序时，它可以正常工作，但是如果我重新加载页面，则会出现以下错误：

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>E716BA4DFD8C1B54</RequestId>
<HostId>
0EcNthjt/zlsAZxEx8JncShstTBNxFram3F6Jy2uI0LD+am1l+7YxGAbZ1dVphkuhZj32mnkjug=
</HostId>
</Error>

我已经按照本教程设置了包含所有必需字段的 CloudFront 分发：

Deploy an angular spa as a static website

我已将 index.html 作为默认根对象放置，并将其放置在 S3 存储桶的索引文档选项下。

通过该设置，它应该可以工作并在您重新加载页面时使用 angular 的 index.html，但我收到了 AccessDenied 错误。

Answer 1

好的，我刚刚从同一篇文章中发现了问题：

Deploy an angular spa as a static website

注意这一点非常重要：

重要提示：Origin Domain Name 将为您提供下拉列表 S3 存储桶。你不应该使用它。因为它省略了 S3 的区域和 它将导致请求重定向而不是通过 通过 CloudFront 的流量。 （可能有更好的配置方式 这个我不确定。）所以只需在此处复制并粘贴您的 S3 URL。 .s3-.amazonaws.com .

确保您使用以下 URL 结构将您的存储桶放置为原始域名：

<bucket-name>.s3-website-<bucket-region>.amazonaws.com

不要使用建议的存储桶 URL 结构，因为它不起作用。希望这对未来有所帮助。