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

Question

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

3

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

最初的回答：

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

我已经按照以下教程设置了CloudFront分发的所有必要字段：将Angular单页应用作为静态网站部署。我已将index.html放置在默认根对象中，并将其放置在S3存储桶的索引文档选项下。

使用这个设置，当您重新加载页面时，它应该正常工作并使用Angular的index.html，但我遇到了AccessDenied错误。请问如何解决？

- Luis Cabrero

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luis Cabrero · Accepted Answer

好的，我刚发现了问题，来自同一篇文章：将angular spa部署为静态网站。需要特别注意以下几点：

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

请确保将您的存储桶作为Origin Domain Name，并遵循以下URL结构：

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

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