从 s3 提供的 React 应用程序在 edge/IE 的 404 页面中产生结果
React app served from s3 results in 404 page from edge/IE
所以我有一个 React/Redux 应用程序目前正在通过 Amazon s3 提供服务。我们已将 s3 配置为在出现 4xx 错误时呈现 index.html 页面并为我们的 bundle.js 提供服务。这允许反应路由器被引导并从那里接管。直到最近,这都没有问题。现在,当我尝试访问 IE 或 Edge 中的页面时,我得到 IE 或 Edge 404 页面。
如果我关闭 IE 浏览器上的 "Show friendly HTTP error messages" 选项,一切正常。根据我所做的研究,这是我对正在发生的事情的理论:
当客户端点击请求的路由时,反应路由器还没有被引导。这导致必须通过呈现 /index.html 页面来挽救 404。当返回 404 时,IE/Edge 介入并呈现他们自己的 404 页面,这会阻止 index.html 被呈现。
对于如何在不实际使用完整后端的情况下解决这个问题,我有点不知所措。我可以在 s3 设置中配置重定向,将根 url 替换为 index.html ,但这会将所有子路由从主路由中分离出来。有没有一种方法可以配置应用程序,使其在所有主流浏览器上运行,而无需实际实现实际的后端?
编辑:所以我找到了这篇文章,它展示了如何使用 cloudfront 通过在自定义错误上呈现索引来解决此问题:https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af。有谁知道这是否可能使用云耀斑?我个人实际上没有访问 cloudflare 的权限,所以我不确定这种可能性。
好的,所以我发现:
1) 您无法在 cloudflare 中修复此错误。
2) 您可以将 cloudfront 置于 S3 和 cloudflare 之间,并简单地实现自定义错误规则。
3) 在为云端选择存储桶时不要使用标准下拉选项。如果您在配置错误规则时提供存储桶名称,cloudfront 会将其视为普通文件而不是静态站点,因此无法拦截错误。您必须为存储桶使用完全限定的 url。我希望这可以节省一些时间。我在这个问题上失眠了。
如果它在禁用 "Show friendly HTTP error messages" 的情况下仍然有效,那么也可以通过延长错误页面来解决该问题。默认情况下,IE 将显示那些小于 512 bytes.
的页面
所以我有一个 React/Redux 应用程序目前正在通过 Amazon s3 提供服务。我们已将 s3 配置为在出现 4xx 错误时呈现 index.html 页面并为我们的 bundle.js 提供服务。这允许反应路由器被引导并从那里接管。直到最近,这都没有问题。现在,当我尝试访问 IE 或 Edge 中的页面时,我得到 IE 或 Edge 404 页面。
如果我关闭 IE 浏览器上的 "Show friendly HTTP error messages" 选项,一切正常。根据我所做的研究,这是我对正在发生的事情的理论:
当客户端点击请求的路由时,反应路由器还没有被引导。这导致必须通过呈现 /index.html 页面来挽救 404。当返回 404 时,IE/Edge 介入并呈现他们自己的 404 页面,这会阻止 index.html 被呈现。
对于如何在不实际使用完整后端的情况下解决这个问题,我有点不知所措。我可以在 s3 设置中配置重定向,将根 url 替换为 index.html ,但这会将所有子路由从主路由中分离出来。有没有一种方法可以配置应用程序,使其在所有主流浏览器上运行,而无需实际实现实际的后端?
编辑:所以我找到了这篇文章,它展示了如何使用 cloudfront 通过在自定义错误上呈现索引来解决此问题:https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af。有谁知道这是否可能使用云耀斑?我个人实际上没有访问 cloudflare 的权限,所以我不确定这种可能性。
好的,所以我发现:
1) 您无法在 cloudflare 中修复此错误。
2) 您可以将 cloudfront 置于 S3 和 cloudflare 之间,并简单地实现自定义错误规则。
3) 在为云端选择存储桶时不要使用标准下拉选项。如果您在配置错误规则时提供存储桶名称,cloudfront 会将其视为普通文件而不是静态站点,因此无法拦截错误。您必须为存储桶使用完全限定的 url。我希望这可以节省一些时间。我在这个问题上失眠了。
如果它在禁用 "Show friendly HTTP error messages" 的情况下仍然有效,那么也可以通过延长错误页面来解决该问题。默认情况下,IE 将显示那些小于 512 bytes.
的页面