部署在Amazon AWS S3的React应用刷新时出现404错误求助

嘿，这个问题我之前帮好几个开发者解决过，太常见啦！咱们先搞清楚为啥会出现这个情况：

React是单页应用（SPA），它的路由是前端路由——也就是说路由逻辑是在浏览器端处理的，而不是由服务器（这里就是S3）来处理。当你第一次访问根路径时，S3会返回index.html，React加载后接管路由没问题；但当你刷新页面或者直接访问子路径（比如/blog）时，S3会尝试去查找名为blog的文件/对象，显然这个对象不存在，就会抛出NoSuchKey的404错误。

下面分两种场景给你解决方案：

场景1：仅使用S3托管静态网站 #

• 登录AWS控制台，找到你的目标S3存储桶
• 切换到「属性」标签页，找到「静态网站托管」模块
• 确保已经启用了静态网站托管，并且索引文档已经设置为index.html
• 关键操作：把错误文档也设置为index.html
• 保存设置后，等待1-2分钟生效，再刷新页面试试——这时候S3会把所有404请求转发到index.html，React路由就能正常接管处理了

场景2：使用CloudFront配合S3（推荐用于生产环境） #

如果你的应用用了CloudFront做CDN加速，只改S3还不够，需要在CloudFront里配置错误响应：

• 打开CloudFront控制台，找到你的分发（Distribution）
• 切换到「行为」标签页，编辑默认的行为（Default Behavior）
• 滚动到「错误页面」部分，点击「创建自定义错误响应」
• 配置参数：
  • HTTP错误代码：选择404
  • 自定义响应代码：输入200
  • 响应页面路径：输入/index.html
• 保存更改，等待CloudFront的分发更新完成（通常需要5-10分钟）
• 之后刷新页面，CloudFront会把所有404请求转换成200状态码并返回index.html，React路由就能正常工作了

小提示 #

如果你用的是React Router的HashRouter，不会出现这个问题，但URL里会带#（比如/#/blog），用户体验不如BrowserRouter友好，所以还是推荐上面的解决方案哦。

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