托管在 s3 中的静态网站：页面 return 刷新后 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 加载为我的页面。com/list 并显示页面内容。

但是在任何不是主页的子页面上，例如我的页面。com/list，一旦我用浏览器刷新页面，它 returns 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，它不存在，所以它 returns 404 错误.

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

Answer 2

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

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

static website hosted in s3: pages return 404 after refresh

amazon-s3

reactjs

react-router-dom