reactjs - 静态网站托管在 s3 : pages return 404 after refresh

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)构建的网站，当我打开网址时，它运行良好，例如从 mypage.com 来看，转到/list 的效果很好。 URL 加载为 mypage.com/list 并显示页面内容。

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

404 Not Found

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

我什至不知道如何调试这个......有什么想法吗？

Answer 1

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

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

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