amazon-web-services - 尝试通过我网站上的完整 url 访问页面时收到 AccessDenied

标签 amazon-web-services amazon-s3 amazon-cloudfront access-denied

有一段时间,我只是将网站的内容存储在 s3 存储桶中,并且可以通过完整的 url 访问所有页面。我想通过添加 SSL 来使我的网站更加安全,因此我创建了一个 CloudFront 分配来指向我的 s3 存储桶。

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

enter image description here

我的 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 的照片。如下所示: enter image description here

enter image description here

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

设置两个自定义错误响应后,我部署了我的 Cloudfront 解决方案和 wallah,它起作用了!

我使用了以下article帮助指导我找到这个解决方案。

关于amazon-web-services - 尝试通过我网站上的完整 url 访问页面时收到 AccessDenied,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44318922/

相关文章:

amazon-web-services - 为什么 aws cli 不能使缓存正确失效 - AWS Cloudfront

amazon-web-services - Redshift DEFAULT GETDATE() 处理 INSERT 但不处理 COPY

amazon-web-services - 如何为 Cloudformation 创建基于堆栈状态的 IAM 策略?

AWS 的 java.nio.file 实现

php - 使用 php 快速列出 Amazon S3 存储桶中的所有文件的方法?

ssl - 将 PFX 转换为 PEM 并出现错误 "unable to load certificate"

amazon-web-services - 对于 us-east-1 以外的区域,AWS CloudFront 返回 503

amazon-web-services - aws-sdk-go 中的 Goroutine 泄漏?

node.js - AWS Lambda 函数总是返回空值( Node/Javascript)?

amazon-s3 - 授予经过身份验证的用户组对文件的读取权限