AWS Amplify部署应用访问URL子路径返回Access Denied错误

你遇到的是AWS Amplify托管单页应用（SPA）的经典路由匹配问题：

• 基于React/Vue/Angular/Svelte等框架构建的单页应用，路由逻辑全部运行在客户端浏览器侧，属于客户端侧路由：整个应用只有一个入口文件/index.html，服务端存储中并不存在/page这类子路径对应的实体文件。
• Amplify默认的静态托管规则会严格按照请求路径匹配服务端存储的文件：访问根路径https://master.XXXXXXX.amplifyapp.com/时，服务端会自动命中根目录下的index.html，因此页面可以正常加载；直接访问/page这类子路径时，服务端找不到对应路径的文件，就会返回底层S3存储的Access Denied 403错误，不会把请求交给前端入口文件处理。

通过Amplify控制台配置全路径200重写规则，将所有非静态资源的请求统一转发到入口文件index.html即可解决，操作步骤如下：

• 登录AWS Amplify控制台，进入目标应用的管理页
• 在左侧导航栏找到「托管」分类下的「重写和重定向」选项，点击进入配置页
• 点击「添加规则」按钮，按如下参数填写配置：
  • 源路径：填入正则表达式 </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>，该规则会匹配所有不带静态资源后缀的请求路径
  • 目标路径：填入 /index.html
  • 重定向/重写类型：选择 200 (Rewrite)
• 保存规则后等待10秒左右配置生效，此时直接访问任意子路径都会正常加载前端应用，由客户端路由接管页面渲染，不会再出现Access Denied错误。

注意事项 #

• 不要将规则类型配置为301/302跳转：这类跳转是浏览器端跳转，会修改地址栏路径，导致前端路由无法获取原始访问路径，触发路由逻辑失效。
• 如果你使用Next.js静态导出（next export）模式部署，除上述规则外，还需要在next.config.js中确认assetPrefix和basePath配置与实际部署路径一致，避免静态资源加载失败。

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