CreateReactApp集成Firebase谷歌授权部署Vercel报iframe非法URL错误如何解决

解决方案 #

• 优先检查Firebase授权域名配置
  本地localhost默认在Firebase的授权白名单内，部署到Vercel后需要手动添加域名：进入Firebase控制台 → 选择你的项目 → 进入「Authentication」→「登录方式」页面 → 下滑找到「授权网域」板块 → 点击「添加域名」，输入你部署到Vercel的域名prototype-sepia-gamma.vercel.app后保存即可。
• 检查Vercel环境变量配置
  确认你本地.env文件中所有以REACT_APP_开头的Firebase配置变量，都已完整添加到Vercel项目的「Settings → Environment Variables」中，变量名和取值必须和本地完全一致，配置完成后需要触发一次重新部署才能生效。
• 确认Firebase SDK版本匹配
  你当前使用的是Firebase v8版本的语法，检查package.json中firebase依赖的版本号是否为v8.x.x，如果实际安装的是v9及以上版本，会出现API调用不匹配的问题，本地依赖缓存未触发问题但部署环境重新安装依赖后报错，可直接锁定版本重新安装依赖后部署。
• 补充错误捕获定位具体问题
  你当前的登录逻辑没有添加错误捕获分支，建议补充catch块打印完整错误信息，可直接定位根因：

const handleSignInWithGoogle = async () => {
  auth
    .signInWithPopup(provider)
    .then((result) => {
      dispatch(
        userActions.login({
          userName: result.user.displayName,
          userEmail: result.user.email,
        })
      );
    })
    .then(() => {
      history.push("/profile");
    })
    .catch((err) => {
      console.error("登录失败详情：", err.code, err.message)
    })
};

打印后如果看到auth/unauthorized-domain错误码即可直接确认是授权域名未添加的问题，如果是auth/invalid-api-key则是环境变量配置错误。

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