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

IT技术 reactjs amazon-s3 deployment single-page-application amazon-cloudfront
2021-05-11 09:08:22

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

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

我不知道是否存在另一种方法来保持 URL 而不进行任何更改 (domain.com/page) 并避免 404 错误的 Web 服务器 (apache) 处理方式。

2个回答

如果您正在使用CloudFront的将主机S3网站,摆脱了有效途径的404非指数航线的重载像www.google.com/about或类似的非/是通过以下步骤:

  1. 转到您的 CloudFront 分配
  2. 转到错误页面
  3. 使用以下参数创建一个新的错误页面:
    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

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

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