使用Vue3+Firebase Stripe扩展遇CORS问题，求教获取firebaseApp实例

问题解决步骤 #

核心是正确获取Firebase App实例并指定云函数部署地域——Stripe扩展创建的云函数默认部署在us-central1，客户端调用时必须匹配该地域，否则会触发CORS或函数找不到的问题。

第一步：完善Firebase配置文件，导出App实例

在你的firebase.js配置文件中，初始化Firebase App并导出实例，示例代码如下：

// firebase.js
import { initializeApp } from "firebase/app";

// 从Firebase控制台复制你的项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化并导出Firebase App实例
const firebaseApp = initializeApp(firebaseConfig);
export { firebaseApp };

第二步：在Vue组件中导入App实例并调用云函数

修改现有组件代码，导入firebaseApp并传入getFunctions，同时指定云函数地域：

<script>
import { getFunctions, httpsCallable } from "firebase/functions";
// 导入Firebase App实例（路径根据你的文件位置调整）
import { firebaseApp } from "@/firebase.js";

export default {
  props: ["subscription"],

  data() {
    return {
      isLoading: false,
    };
  },

  methods: {
    async openCustomerPortal() {
      this.isLoading = true;
      // 传入App实例和云函数部署地域（默认us-central1，若扩展部署在其他地域请替换）
      const functions = getFunctions(firebaseApp, "us-central1");
      const functionRef = httpsCallable(
        functions,
        "ext-firestore-stripe-payments-createPortalLink"
      );
      try {
        const { data } = await functionRef({
          returnUrl: window.location.origin,
        });
        window.location.assign(data.url);
      } catch (error) {
        console.error("打开客户门户失败：", error);
        // 可添加错误提示逻辑
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

额外检查项

• 确认Stripe扩展部署地域：在Firebase控制台「扩展」页面，找到firestore-stripe-payments扩展，查看其部署地域，确保与代码中指定的一致。
• 确认云函数状态：在Firebase控制台「云函数」页面，能看到ext-firestore-stripe-payments-createPortalLink函数处于已部署状态。

内容的提问来源于stack exchange，提问作者Eugène Carmona