使用Firebase Auth在Vue3客户端注册用户时遇auth/network-request-failed错误

核心原因 #

报错net::ERR_CONNECTION_REFUSED说明Vue3客户端无法连接到本地运行的Firebase Auth模拟器，大概率是模拟器未启动、端口冲突或配置不匹配导致。

具体解决步骤 #

1. 确认Firebase Auth模拟器已启动 #

• 先确保安装Firebase CLI，未安装则执行：

  npm install -g firebase-tools
  

• 进入项目根目录，启动Auth专属模拟器：

  firebase emulators:start --only auth
  

• 查看启动日志，确认Auth服务运行端口为9099（若日志显示端口不同，需同步修改代码中的连接地址）。

2. 检查端口占用情况 #

• 若模拟器启动失败或端口被占用，排查9099端口的占用进程：
  • Windows系统：

    netstat -ano | findstr :9099
    

    找到PID后，通过任务管理器结束对应进程。
  • Mac/Linux系统：

    lsof -i :9099
    

    执行kill -9 <PID>杀掉占用进程。
• 也可修改模拟器端口，在项目根目录的firebase.json中配置：

  {
    "emulators": {
      "auth": {
        "port": 9098 // 替换为未被占用的端口
      }
    }
  }
  

  同时修改main.js中的连接地址：

  connectAuthEmulator(getAuth(), "http://localhost:9098");
  

3. 修正Firebase初始化代码 #

确保模拟器连接逻辑在App初始化之后，且Auth实例正确关联初始化的App：

import { initializeApp } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";

const firebaseConfig = {
    // 你的配置信息
};

// 初始化App
const app = initializeApp(firebaseConfig);
// 获取关联当前App的Auth实例
const auth = getAuth(app);

// 连接模拟器
if (location.hostname === "localhost") {
    connectAuthEmulator(auth, "http://localhost:9099");
}

4. 排查本地网络限制 #

• 临时关闭本地防火墙或安全软件，测试是否能连接模拟器。
• 若使用了VPN、代理工具，先关闭后再尝试注册操作。

5. 临时绕过模拟器（验证代码逻辑） #

如果只是想确认注册代码本身无问题，可注释掉模拟器连接代码，直接使用Firebase官方Auth服务：

// if (location.hostname === "localhost") {
//     connectAuthEmulator(getAuth(), "http://localhost:9099");
// }

此时客户端会直接请求Firebase官方服务器，若能正常注册，说明问题出在本地模拟器配置。

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