Vue应用调用Firebase云函数访问Tenants遇404问题求助

核心问题：调用方式不匹配 #

你写的是HTTP类型云函数（onRequest），但前端用的是**可调用云函数（httpsCallable）**的调用方式，两者不兼容，直接导致404错误。

方案1：将云函数改为可调用函数（推荐，适配前端现有调用代码） #

把原来的Express HTTP函数改成Firebase可调用函数，这样前端的httpsCallable就能正常匹配调用：

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp(); // 必须初始化Admin SDK才能使用tenantManager
const tenantManager = admin.auth().tenantManager();

// 可调用云函数
exports.getTenants = functions.https.onCall(async (data, context) => {
  // 可选：添加权限验证，确保只有管理员能调用
  if (!context.auth) {
    throw new functions.https.HttpsError('unauthenticated', '需要登录后才能访问');
  }

  try {
    // 递归处理分页，获取所有租户
    const getAllTenants = async (pageToken = null) => {
      const result = await tenantManager.listTenants(100, pageToken);
      let tenants = result.tenants.map(t => t.toJSON());
      if (result.pageToken) {
        tenants = tenants.concat(await getAllTenants(result.pageToken));
      }
      return tenants;
    };

    const tenantsArr = await getAllTenants();
    return tenantsArr;
  } catch (error) {
    console.error("获取租户失败:", error);
    throw new functions.https.HttpsError('internal', '获取租户失败', error.message);
  }
});

操作步骤 #

1. 替换原云函数代码后，执行部署命令：

firebase deploy --only functions:getTenants

2. 前端代码无需修改，直接重新调用即可。

方案2：前端改用普通HTTP GET请求（适配原来的HTTP云函数） #

如果不想修改云函数，把前端的httpsCallable调用换成普通的GET请求：

// Vuex store中的代码修改
async getTenants({ commit }) {
  commit("SET_TENANTS", []);
  try {
    // 注意：原HTTP函数挂载了Express的/getTenants路由，完整路径是函数URL + /getTenants
    const response = await fetch("https://us-central1-mysite-12432-staging.cloudfunctions.net/getTenants/getTenants");
    if (!response.ok) throw new Error("请求失败");
    const tenantsArr = await response.json();
    commit("SET_TENANTS", tenantsArr);
    console.log("租户列表:", tenantsArr);
  } catch (error) {
    console.error("获取租户失败:", error);
  }
},

额外检查项 #

1. 确认云函数已成功部署：执行firebase functions:list命令，查看已部署的函数列表，确保getTenants存在，且区域为us-central1（和前端调用URL的区域一致）。
2. CORS配置验证：如果用方案2，确保云函数的CORS配置包含你前端的域名（现有配置只允许http://localhost:3000，生产环境需添加对应域名）。
3. Admin SDK初始化：云函数中必须调用admin.initializeApp()，否则tenantManager无法正常工作。

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