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

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 运行正常。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 被命中时（通过在浏览器中手动输入或刷新），它会在命中我们的存储桶之前将请求发送到 /list 到 S3 的根服务器（由 AWS 管理的服务器）。该 S3 服务器不知道这是否是 reactjs 应用程序，因此它进入存储桶以查找我存储桶根目录中不存在的 /list，因此它返回 404 错误。

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

Answer 2

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