从 s3 提供的 React 应用程序导致来自 edge/IE 的 404 页面答案

【问题标题】：React app served from s3 results in 404 page from edge/IE从 s3 提供的 React 应用程序导致来自 edge/IE 的 404 页面
【发布时间】：2017-07-18 15:31:16
【问题描述】：

所以我有一个目前通过 Amazon s3 提供服务的 React/Redux 应用程序。我们已将 s3 配置为在 4xx 错误时呈现 index.html 页面并提供我们的 bundle.js。这允许反应路由器被引导并从那里接管。直到最近，这都没有问题。现在，当我尝试访问 IE 或 Edge 中的页面时，我得到了 IE 或 Edge 404 页面。

如果我关闭 IE 浏览器上的“显示友好的 HTTP 错误消息”选项，一切正常。根据我所做的研究，这是我对正在发生的事情的理论：

当客户端点击请求的路由时，react 路由器还没有被引导。这导致 404 必须通过渲染 /index.html 页面来挽救。当返回 404 时，IE/Edge 会介入并呈现它们自己的 404 页面，从而阻止 index.html 被呈现。

我对如何在不实际使用完整后端的情况下解决此问题感到不知所措。我可以在 s3 设置中配置重定向，用 index.html 替换根 url，但这会破坏主路由的所有子路由。有没有办法配置应用程序，使其可以在所有主要浏览器上运行而无需实际实现实际后端？

编辑：所以我发现这篇文章展示了如何使用 cloudfront 通过在自定义错误上呈现索引来解决这个问题：https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af。有谁知道这是否可以使用云耀斑？我个人实际上没有访问 cloudflare 的权限，所以我不确定可能性。

【问题讨论】：

标签： reactjs internet-explorer amazon-s3 react-router microsoft-edge

【解决方案1】：

如果它在禁用“显示友好的 HTTP 错误消息”的情况下工作，那么也可以通过延长错误页面来解决此问题。默认情况下，如果小于512 bytes，IE 会显示这些页面。

【讨论】：

【解决方案2】：

好吧，我发现了：

1) 您无法在 cloudflare 中挽救此错误。

2) 您可以将 cloudfront 放在 S3 和 cloudflare 之间，并简单地实现自定义错误规则。

3) 为 cloudfront 选择存储桶时不要使用标准下拉选项。如果你在配置错误规则的时候给出了bucket的名字，cloudfront会把它当作一个普通文件而不是一个静态站点，因此它无法拦截错误。您必须使用存储桶的完全限定 url。我希望这可以节省一些时间。我为这个问题失眠了。

【讨论】：