Angular13部署GCP Hosting刷新报404 JWT拦截器不生效问题

问题现象 #

• 刷新页面时控制台抛出404 page not found错误，但页面本身可正常加载
• 发起GET请求时会触发上述404异常，已排查JWT拦截器配置，确认对应请求未经过该拦截器处理
  

根因分析 #

1. 刷新页面404是SPA应用部署到静态托管服务的典型问题：Angular的路由逻辑全部在客户端侧执行，GCP静态托管默认不会将无对应物理文件的路径请求重定向到index.html，刷新子路由时服务端会优先查找路径对应的物理文件，找不到就返回404；后续Angular客户端脚本启动后完成路由渲染，所以用户能看到页面正常加载，但控制台会保留服务端返回的404报错记录。
2. GET请求触发404通常是两类原因：一是API请求使用了相对路径，被静态托管服务当成静态资源请求查找，找不到对应文件返回404；二是重写规则配置错误，将API请求也重写到了index.html，没有转发到实际后端服务，导致返回内容不符合预期触发报错。

修复步骤 #

1. 配置SPA路由重写规则 #

根据你使用的GCP托管方案选择对应配置：

• 若使用Cloud Storage + 全球HTTP(S)负载均衡方案：在负载均衡器的URL映射中添加路由规则，将所有非静态资源、非API前缀的请求全部重写为返回根路径下的index.html；注意将API路径（如/api/*）单独配置路由转发到对应的后端服务，不要走静态资源重写逻辑。
• 若使用Firebase Hosting（GCP生态Angular项目常用托管方案）：在项目根目录的firebase.json中添加重写配置，参考示例如下：

{
  "hosting": {
    "public": "dist/你的Angular项目构建产物目录名",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/api/**",
        "run": {
          "serviceId": "你的后端服务名",
          "region": "服务部署区域"
        }
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

配置完成后重新执行部署命令生效。

2. 排查GET请求异常 #

• 打开浏览器开发者工具的Network面板，定位触发404的GET请求，核对完整请求路径：确认接口请求是否漏写了后端服务的完整域名前缀，错误使用相对路径导致请求发到了静态托管域名下。
• 排查全局HTTP拦截器：除JWT拦截器外，检查是否存在其他拦截器修改了请求URL、添加了错误的路径前缀。
• 若请求路径正确，核对后端服务的接口权限、CORS配置，排除后端服务本身返回404的情况。

验证标准 #

• 刷新任意子路由页面，控制台不再出现404报错
• 手动在地址栏输入子路由地址访问，可正常加载对应页面，不会跳转到GCP默认404页面
• 所有GET接口请求正常返回预期格式的响应，不会被重写返回index.html内容

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