AWS API Gateway出现ERR_ABORTED 403无法加载JS、CSS静态资源问题

你遇到的403错误本质是静态资源引用路径缺少API Gateway的阶段名前缀：
API Gateway REST API的默认访问路径规则是 https://<API-ID>.execute-api.<Region>.amazonaws.com/<阶段名>/<资源路径>，你当前前端代码的静态资源均使用根路径相对路径引用（比如/s1997.css、/static/main.css），拼接后会省略阶段名直接请求根路径资源，无法匹配到你配置的代理集成规则，因此触发403。

方案1：修改前端静态资源公共路径（最推荐，改造成本最低） #

在前端打包配置中统一添加公共路径前缀，让所有静态资源引用自动带上阶段名：

• Vite项目：在vite.config.js中配置 base: '/ProxyStage/'
• Vue CLI/Webpack项目：在对应配置文件中配置 publicPath: '/ProxyStage/'
• 原生HTML项目：在HTML的head标签中添加 <base href="/ProxyStage/"> 统一处理所有相对路径，或者手动给所有静态资源的src/href加上/ProxyStage前缀

方案2：配置API Gateway自定义域名映射（无需修改前端代码） #

如果你不想调整前端代码，可以通过绑定自定义域名的方式省略阶段名前缀：

1. 进入API Gateway控制台的「自定义域名」页面，创建你的专属域名
2. 在域名的「API映射」配置中，选择你搭建的REST API，对应阶段选择ProxyStage，路径映射栏留空
3. 按照控制台提示配置DNS解析，将你的自定义域名CNAME解析到API Gateway给出的目标域名
4. 后续直接通过自定义域名访问站点，路径无需携带阶段名，根路径的静态资源请求会直接映射到对应阶段的代理规则

方案3：新增根路径代理规则（不推荐，兼容风险高） #

你也可以额外配置一条根路径的/{proxy+}代理规则，将不带阶段名的请求转发到后端，该方案容易出现阶段名匹配冲突，非特殊场景不建议使用。

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