部署在S3的React应用刷新页面返回文档类404错误如何解决？

问题根本原因 #

这个问题和webpack配置无关，是S3静态网站托管的默认行为导致的：
你将错误文档设置为index.html后，当用户刷新非根路径的页面（比如/a），S3找不到桶中对应的/a文件，会返回index.html的响应体，但HTTP状态码仍然保持404，所以浏览器控制台会显示document类型的404错误。而React加载完成后可以通过前端路由正确渲染页面，所以功能不受影响。你本地devServer正常是因为historyApiFallback: true配置会在匹配不到资源时返回200状态码+index.html内容，不会返回404。

解决方法 #

方案1：配置S3重定向规则（无CDN场景） #

进入S3控制台对应的存储桶，选择「属性」tab，找到「静态网站托管」配置项，添加如下重定向规则：

[
  {
    "Condition": {
      "HttpErrorCodeReturnedEquals": "404"
    },
    "Redirect": {
      "ReplaceKeyWith": "index.html",
      "HttpRedirectCode": "200"
    }
  }
]

配置后S3遇到404请求时会返回200状态码+index.html内容，和本地devServer行为一致。

方案2：通过CloudFront配置错误响应（使用CDN场景） #

如果你的S3桶前面搭配了CloudFront CDN，直接在CloudFront配置中添加错误页面规则：

• 错误码选择404、403
• 自定义错误响应选择「是」
• 响应页面路径填/index.html
• HTTP响应码选择200
  保存后等待配置生效即可。

方案3：替换路由为HashRouter #

如果不想修改云服务配置，可以直接修改路由代码，将BrowserRouter替换为HashRouter，路由会自动携带#前缀，所有请求都会默认请求根路径的index.html，不会触发404问题，缺点是URL中会存在#符号。

内容的提问来源于stack exchange，提问作者Moon