Vue3项目Firebase App Check生产环境返回500错误求助

问题描述 #

开发模式下使用调试提供方时App Check运行正常，但构建生产版本后，App Check请求返回HTTP 500错误，请求示例：

https://content-firebaseappcheck.googleapis.com/v1/projects/app-name/apps/1:id:web:id:exchangeRecaptchaEnterpriseToken?key=xxxxxxxxxxxxxxxxxxxxxxxxxx 500

当前配置代码：

if (location.hostname === "127.0.0.1") {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
const appcheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(
    import.meta.env.VITE_FIREBASE_RECAPTCHA_ENTERPRISE_KEY
  ),
  isTokenAutoRefreshEnabled: true, // 设置为true以允许自动刷新
});

排查与解决步骤 #

• 确认reCAPTCHA Enterprise密钥的生产环境有效性

  • 确保VITE_FIREBASE_RECAPTCHA_ENTERPRISE_KEY是生产环境专用密钥，而非调试密钥。调试密钥未绑定生产域名，无法在正式环境使用。
  • 登录Google Cloud Console的reCAPTCHA Enterprise控制台，检查生产域名已添加到密钥的允许列表中；同时在Firebase控制台的App Check设置页，确认reCAPTCHA Enterprise提供方已正确关联该密钥。

• 清理调试模式残留代码

  • 原代码通过location.hostname判断环境存在风险，改用Vite官方的环境变量判断更可靠，避免生产环境意外启用调试模式：

    if (import.meta.env.MODE === 'development') {
      self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
    }
    const appcheck = initializeAppCheck(app, {
      provider: new ReCaptchaEnterpriseProvider(
        import.meta.env.VITE_FIREBASE_RECAPTCHA_ENTERPRISE_KEY
      ),
      isTokenAutoRefreshEnabled: true,
    });
    

  • 构建生产包前清理项目缓存，确保调试令牌相关代码不会被打包到生产版本中。

• 检查Firebase App Check生产配置

  • 在Firebase控制台中，确认对应Web应用的App Check已启用生产模式，且reCAPTCHA Enterprise作为提供方状态正常。
  • 检查Google Cloud Console的IAM页面，确保Firebase App Check的服务账号拥有调用reCAPTCHA Enterprise API的权限。

• 验证域名授权与网络配置

  • 生产环境域名需同时添加到Firebase项目的「授权域名」列表（项目设置→常规→Web应用→授权域名）和App Check的允许域名列表。
  • 排查生产环境的防火墙、CDN是否拦截了content-firebaseappcheck.googleapis.com的请求，确保该域名可正常访问。

• 查看详细错误信息

  • 打开浏览器开发者工具的Network面板，查看500请求的响应体，里面会包含具体错误原因（如密钥无效、域名未授权等），根据提示针对性修复。

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