AWS Amplify部署React应用：刷新页面控制台出现虚假404错误

这是单页应用(SPA)部署在Amplify上的典型问题：刷新时浏览器直接请求服务器端的路由路径，服务器没有对应资源返回404，但前端路由立刻接管渲染页面，导致页面显示正常但控制台报错。解决方法是配置Amplify的重定向规则，让服务器把所有路由请求导向index.html：

1. 打开AWS Amplify控制台，找到你的目标应用
2. 切换到Hosting标签页，点击页面中的Rewrites and redirects选项
3. 在规则列表里点击Edit，添加一条新规则：
   • 源地址：输入正则 </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>（这条规则会排除静态资源，只重定向路由请求）
   • 目标地址：填写 /index.html
   • 类型：选择 200 (Rewrite)
4. 保存规则，等待Amplify重新部署生效

如果觉得正则太复杂，也可以用更简单的规则：

• 源地址：/*
• 目标地址：/index.html
• 类型：200 (Rewrite)
  不过这种方式会把所有请求都导向index.html，包括静态资源，虽然大部分情况下不影响，但推荐用前者的精准规则。

配置完成后，刷新页面就不会再出现虚假404错误了。

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