Question

使用此存储桶策略：

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

我正在部署一个由reactJS v16 +（react-router-dom v5）构建的网站，当我打开该url时，它可以正常运行，例如从mypage.com，转到/ list的效果很好。网址已加载为mypage.com/list，并显示了页面内容。

但是，在不是主页的任何子页面上，例如mypage.com/list，一旦我使用浏览器刷新页面，它就会返回S3的404：

404 Not Found

    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: list

我什至都不知道该如何调试...任何想法？

Answer 1

所以，我今天有同样的经历，@ jamesdeath123的回答也帮助我也了解了原因。就我而言，我使用的是create-react-app，所以我找到了一种生成 error.html 的方法，该方法将在s3存储桶中使用。不过，我意识到，我要做的就是将error页面也设置为 index.html 。

Answer 2

正如@Panther在评论中提到的那样，正确的方法是在S3存储桶的静态Web托管配置中向index.html添加错误后备。

原因是当URL被命中（通过浏览器中的手动输入或刷新）时，它在命中我们的存储桶之前将请求发送到/ list到S3的根服务器（由AWS管理的一个）。该S3服务器不知道这是否是reactjs应用，因此它进入存储桶以在我的存储桶的根目录中查找/ list（不存在），因此它返回404错误。

但是，通过添加错误回退，现在，当它得到404时，它将请求重定向到index.html，react应用已定义并加载到其中。在这种情况下，/ list将通过常规流程到达正确的路由器，该路由器处理页面呈现，问题已解决。

s3中托管的静态网站：刷新后页面返回404

2 个答案: