刷新页面时在 S3 AWS 上反应应用程序 SPA 显示 404 页面答案

【问题标题】：React app SPA on S3 AWS while refreshing the page shows 404 page刷新页面时在 S3 AWS 上反应应用程序 SPA 显示 404 页面
【发布时间】：2021-01-08 01:50:35
【问题描述】：

我在 S3 存储桶上有一个用 React JS 制作的 SPA，我正在使用 Cloud Front 通过 HTTPS 工作并使用自定义域。当我刷新页面时 - 如果我有另一个不是 BASE_URL （例如 domain.com/something） 的路由，S3 会向我发送 404 错误。

我也尝试将错误页面重定向到 BASE_URL，但它不起作用，它将我重定向到 S3 提供给我的 Http 默认域，并且再次给我一个 404 错误页面。

我不知道是否存在另一种方法来保持 URL 不变（domain.com/page）并避免网络服务器 (apache) 处理方式的 404 错误。

【问题讨论】：

this 能解决您的问题吗？

标签： reactjs amazon-s3 deployment single-page-application amazon-cloudfront

【解决方案1】：

你有两个选择。要么使用 CloudFront 错误页面作为重定向到 / 的全部内容（您提到您尝试设置错误页面但没有详细说明您做了什么。这应该有效）。缺点是它会以 HTML 页面响应 all 未找到的路径，即使是错误输入的 CSS 路径。

另一种解决方案是使用 Lambda@Edge 重写源请求路径。这是一个更可定制的解决方案，您可以定义要重定向到根的路径。

【讨论】：

【解决方案2】：

如果您使用 CloudFront 托管 s3 网站，在重新加载非索引路由（如 www.google.com/about 或类似非 /）时摆脱 404 的有效方法是通过以下步骤：

转到您的 CloudFront 分配
转到错误页面
使用以下参数创建一个新的错误页面：

    HTTP Error Code: 404
    TTL: 0
    Custom Error Response: Yes
    Response Page Path: /index.html
    HTTP Response Code: 200

享受

感谢这篇文章https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff

【讨论】：