有一段时间,我只是将网站的内容存储在 s3 存储桶中,并且可以通过完整的 url 访问所有页面。我想通过添加 SSL 来使我的网站更加安全,因此我创建了一个 CloudFront 分配来指向我的 s3 存储桶。
网站可以正常加载,但如果用户尝试刷新页面或尝试使用完整网址(即 www.example.com/home )访问页面,他们将收到 AccessDenied 页面。
我的 s3 存储桶上有一项策略,该策略限制仅访问源访问身份,并且 index.html 设置为我的域根对象。
我不明白我错过了什么。
要演示,请随时访问我的site .
您会注意到它如何将您重定向到 kurtking.me/home。要重现错误,请尝试刷新页面或通过完整 URL(即 kurtking.me/life)访问页面
非常感谢任何帮助,因为几天来我一直在努力解决这个问题并寻找答案。
2023 年 8 月 27 日免责声明
我标记为答案的解决方案当时对我有用,并且在我进行本地开发和学习时一直困扰着我。我注意到这可能不是最佳实践。
我没有在 AWS 的这一领域花费足够的时间来找到推荐的替代方案,但在“答案”部分中浮现出一些想法。
最佳答案
我已经弄清楚了,并想发布我的解决方案,以防其他人遇到这个问题。
该问题是由于 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,它起作用了!
我使用了以下article帮助指导我找到这个解决方案。
关于amazon-web-services - 尝试通过我网站上的完整 url 访问页面时收到 AccessDenied,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44318922/