{"data":{"site":{"siteMetadata":{"title":"Gandalf The Blue","author":"ys"}},"markdownRemark":{"id":"a9f560ba-07b3-56ba-9d7e-7ae453d1803f","html":"

最近React项目遇到一个问题，当用户在IE11上刷新页面的时候会返回404错误页面。在其他浏览器上能够正常使用。\n错误页面如下:

\n

\n \n \n \n \n \n \n \n \n \n

\n

项目背景：
\n1， 利用 create react app 构建
\n2， 部署在tomcat上
\n3， 采用 H5 History 路由

\n

服务端tomcat重定向的配置:

\n
<error-page>\n<error-code>404</error-code>\n<location>/index.html</location>\n</error-page>
\n
\n

解决问题的思路很清晰，由于这个错误页面只在IE下面出现，只需要了解该页面出现的机制就行。经过简单的搜索，我发现这个页面是IE 的 Friendly HTTP Error Pages。

\n

自从IE5及以后的所有版本，如果服务端返回特定的错误码同时带的错误信息很短的话，IE会对用户显示上面那个更友好的错误页面。\n而对于触发这个友好错误页面的条件有两个, 并且两个条件必须同时满足:

\n
    \n
  1. 服务端返回的 HTTP 状态码必须是 [400, 403, 404, 405, 406, 408, 409, 410, 500, 501, 505]
    2. \n
  2. HTTP 的消息体 (Response body) 的字节长度必须小于一个阙值
    3. \n
\n

对于状态码 [403,405,410]，默认阈值是256字节，对于响状态码 [400,404,406,408,409,500,501,505]，默认阈值是512字节。

\n

经过检查，我们项目的index.html的大小果然是小于512字节，当tomcat把404重定向到index.html的时候触发了IE的友好错误页面显示。

","timeToRead":1,"frontmatter":{"title":"React 项目在IE11下刷新页面出现404错误","date":"March 09, 2019"},"fields":{"slug":"/refresh-react-project-in-IE11-404-error/","langKey":"en"}}},"pageContext":{"slug":"/refresh-react-project-in-IE11-404-error/","previous":null,"next":{"fields":{"slug":"/on-let-vs-const/","langKey":"en","directoryName":"on-let-vs-const"},"frontmatter":{"title":"let还是const"}},"translations":[]}}