Nuxt网站Firebase Auth在移动设备上登录异常问题求助

核心错误信息（iPhone端日志） #

阻止了 https://www.google.com/recaptcha/enterprise/pat?k=<KEY> 的跨域请求获取凭证，因为这是跨源请求。
资源加载失败，服务器返回401状态码。

具体排查方向 #

• reCAPTCHA 跨域与密钥配置检查

  • 确认Firebase控制台中，reCAPTCHA密钥的允许域名列表已添加线上域名activityapp-419511.web.app，覆盖移动端访问的所有可能域名形式（如不带www、子域名等）。
  • 核对Nuxt项目中Firebase Auth初始化代码，确保reCAPTCHA参数（如recaptchaParameters.domain）与部署域名一致，避免硬编码本地开发域名。
  • 检查Firebase Auth的授权域设置（控制台Auth -> 设置），确保当前域名已被列入允许范围。

• Firebase Auth 会话持久化适配

  • 移动端浏览器隐私模式（如Safari无痕）会限制第三方Cookie和本地存储，需显式设置会话持久化策略为browserSessionPersistence，替代默认的localPersistence：

    import { setPersistence, browserSessionPersistence } from "firebase/auth";
    await setPersistence(auth, browserSessionPersistence);
    

  • 验证路由守卫（如middleware/auth.ts）中，是否直接通过Firebase Auth实例获取用户状态，而非依赖本地存储缓存，避免移动端隐私策略导致的缓存失效。

• 401错误根源定位

  • 401错误表明reCAPTCHA验证未通过，需确认：
    • Firebase控制台中是否启用了对应版本的reCAPTCHA（企业版/标准版），且密钥类型（站点密钥/密钥）与代码配置匹配。
    • 移动端网络环境无代理或防火墙拦截reCAPTCHA资源，可切换4G/Wi-Fi测试。
  • 若使用Nuxt SSR，需确保服务器端与客户端的Firebase Auth实例隔离，避免会话冲突导致的验证失败。

• 移动端调试手段

  • iOS Safari：用Mac端Safari开发者工具连接iPhone，实时查看网络请求、Cookie状态及路由跳转日志，追踪登录流程中的会话丢失点。
  • Android Chrome：通过chrome://inspect功能连接设备，检查Auth请求的响应头和会话凭证是否正确生成。
  • 测试多款移动端浏览器（Chrome、Safari、Edge），排查浏览器特定兼容性问题。

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