刷新页面时Cloudfront返回403禁止

Question

我已将React应用上传到AWS S3，并且正在使用静态网站托管。然后，我将一个Cloudfront发行版链接到s3存储桶。

我可以导航到该站点，并且可以正常运行，除非导航到新页面my-domain / new-page。一开始它成功，但是如果我尝试直接加载页面或刷新，则会收到403禁止错误。

Answer 1

使用React与S3和CloudFront时，我遇到了一个或类似的问题，即加载初始索引页面然后链接到其他页面也很好（推送状态更改），但是如果刷新页面或直接链接到页面，它就来了并显示为“访问被拒绝”状态403。

我发现的解决方案是将403和404错误的自定义错误页面添加到CloudFront配置中。

当对象不存在时，S3响应403，就像客户端路由中的页面一样。

Answer 2

我注意到当您更改对象并立即查找该对象时会发生这种情况。为了解决此问题，我们将对象缓存 5 分钟，因此 CloudFront 将在可用时提供缓存版本。

如果您要更改对象并将 ACL 与对象一起应用，这也涉及到。确保您将公共读取作为存储桶的策略，以便可以减少停机时间。

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::examplebucket/*"]
    }
  ]
}

在 CloudFront 中启用缓存也可以解决该问题。

希望能帮助到你。