尝试通过我的网站上的完整网址访问页面时收到AccessDenied

Question

有一段时间,我只是将我的网站内容存储在一个s3存储桶中,可以通过完整的URL访问所有页面.我想通过添加SSL使我的网站更安全,所以我创建了一个CloudFront Distribution以指向我的s3存储桶.

该网站将加载正常,但如果用户尝试刷新页面或他们尝试使用完整网址(即www.example.com/home)访问页面,他们将收到AccessDenied页面.

我的s3存储桶上有一个策略,它限制只访问Origin Access Identity,并将index.html设置为我的域根对象.

我不明白我错过了什么.

要演示,请随时访问我的网站.

你会注意到它如何将你重定向到kurtking.me/home.要重现错误,请尝试刷新页面或通过完整URL访问页面(即kurtking.me/life)

任何帮助都非常感谢,因为我一直试图绕过这个并在几天内寻找答案.

Answer 1

我已经想出来了,想要发布我的解决方案以防其他人遇到这个问题.

问题是由于Angular是SPA(单页应用程序)而我使用S3存储桶来存储它.当您尝试通过URL访问转到特定页面时,CloudFront将采用(例如,/ about)并转到您的S3存储桶以查找该文件.因为Angular是SPA,所以在S3存储桶中技术上不存在该文件.这就是我收到错误的原因.

我需要做些什么来解决它

如果您在Cloudfront中打开发行版,则会看到"错误页面"选项卡.我不得不添加两个处理400和403的"自定义错误响应".400和403的细节相同,所以我只包含400张照片.见下文:

基本上,正在发生的事情是您告诉Cloudfront无论400或403错误,都要重定向回index.html,从而控制Angular来决定它是否可以转到路径.如果您想为客户端提供400或403错误,则需要在Angular中定义这些路由.

在设置了两个自定义错误响应后,我部署了我的cloudfront解决方案和wallah,它运行良好!

我使用以下文章来指导我解决此问题.