AngularJS项目部署Firebase后404页面状态码异常问题咨询

这个问题我之前帮不少开发者处理过，核心原因是前端路由和服务器路由的冲突：AngularJS用的是客户端路由，Firebase Hosting默认会把所有匹配不到静态资源的请求都返回index.html（状态码200），然后由前端路由接管跳转。所以哪怕你显示了404页面，服务器已经先返回200了，网络面板自然会显示这个状态码。

下面是具体的解决步骤，分服务器配置和前端调整两部分：

1. 配置Firebase Hosting返回正确的404状态码 #

首先要修改项目根目录下的firebase.json，让Firebase在遇到不存在的路径时，返回404状态码，同时加载你的自定义404页面。

方案A：使用静态404页面（推荐） #

把你的404页面单独导出为静态HTML文件（比如404.html），放在Firebase Hosting的public目录下，然后修改firebase.json：

{
  "hosting": {
    "public": "dist", // 替换成你的项目编译输出目录
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "errorPage": "/404.html"
  }
}

这样配置后：

• 用户直接访问不存在的URL时，Firebase会返回404.html，状态码为404
• 用户在应用内部跳转（比如点击无效链接），前端路由会显示你的AngularJS 404页面（此时状态码是200，这是客户端跳转的正常情况，搜索引擎会识别前端路由的404状态）

方案B：配合AngularJS路由返回404状态码 #

如果你不想单独做静态404页面，可以通过Firebase的rewrite规则，针对不存在的路径返回AngularJS的404路由，同时设置状态码404：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      // 优先返回静态资源（js、css、图片等）
      {
        "source": "**/*.@(js|css|png|jpg|gif|svg|ico)",
        "destination": "/$1"
      },
      // 针对已知的有效路由，返回index.html（保持前端路由正常工作）
      {
        "source": "/",
        "destination": "/index.html"
      },
      {
        "source": "/pages/**", // 替换成你的有效路由前缀
        "destination": "/index.html"
      },
      // 其他所有不存在的路径，返回404路由并设置状态码404
      {
        "source": "**",
        "destination": "/pages/errors/error-404",
        "statusCode": 404
      }
    ]
  }
}

这个方案需要你确保/pages/errors/error-404是AngularJS中正确的路由路径，Firebase会把这些请求的状态码设为404，同时加载该路由对应的页面。

2. 前端AngularJS路由的补充调整 #

为了让搜索引擎更好地识别404状态，你可以在AngularJS的路由配置中，给404路由添加明确的状态声明：

function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider
    .state('error-404', {
      url: '/pages/errors/error-404',
      templateUrl: 'pages/errors/error-404.html',
      controller: 'Error404Controller'
    });

  $urlRouterProvider.otherwise('/pages/errors/error-404');
  
  // 启用HTML5模式（可选，但有助于SEO和路由美观）
  $locationProvider.html5Mode(true);
}

然后在error-404.html中添加SEO标签：

<meta name="robots" content="noindex">

告诉搜索引擎这个页面是404，不要索引它。

验证效果 #

配置完成后，重新部署到Firebase：

firebase deploy --only hosting

然后测试两种场景：

1. 直接访问一个不存在的URL（比如https://your-app.firebaseapp.com/invalid-path），查看网络面板，状态码应该是404，同时显示你的自定义404页面
2. 在应用内部点击一个无效链接，前端路由跳转到404页面，此时状态码还是200，但这是客户端跳转的正常现象，不影响SEO

内容的提问来源于stack exchange，提问作者Er.Se