尝试访问重新加载或刷新或角度 5 中的新选项卡中的一个时接收 AccessDenied

Question

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

网站加载得很好，但如果用户尝试刷新页面或尝试使用完整网址（即 www.example.com/home）访问页面，他们将收到 AccessDenied 页面。

Answer 1

当您重新加载并在新选项卡中打开时，S3 无法理解打开的路线。您需要告诉 S3 该路由使用了 index.html。每当打开新路由时，都会出现 403 [访问被拒绝] 错误。为此，您需要设置 CloudFront 以将 403 错误页面重定向到 index.html

转到 aws cloud front 并打开您的配置，然后转到错误页面选项卡，您将看到与上面的屏幕截图相同的内容

这里是详细博客：https://www.internetkatta.com/host-angular-2-or-4-or-5-version-in-aws-s3-using-cloudfront

Answer 2

您可以使用 cloudfront 函数 将 SPA 路由请求重写为 /index.html，而无需更改浏览器的 URL，确保 SPA 路径由应用程序的客户端路由处理。

// 通过检查句点“.”来确定 URI 是否看起来像一个文件 var LooksLikeFile = uri.includes('.');

// If the URI does not look like a file (indicating an SPA route), rewrite to '/index.html'
if (!looksLikeFile) {
    uri = '/index.html';
}