Firebase onCall CORS 问题[重复]

Question

我刚刚用 react 和 vite 创建了一个 firebase 项目，我已经按如下方式配置了我的应用程序：

import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check"
import { connectAuthEmulator, getAuth } from "firebase/auth"
import { connectFirestoreEmulator, getFirestore } from "firebase/firestore"
import { connectFunctionsEmulator, getFunctions } from "firebase/functions"
import { connectStorageEmulator, getStorage } from "firebase/storage"

import { getApp, initializeApp } from "firebase/app"

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
}

initializeApp(firebaseConfig)

const FireApp = getApp()

const isPreview = import.meta.env.VITE_PREVIEW_MODE === "true"

if (isPreview === undefined || !isPreview)
  initializeAppCheck(FireApp, {
    provider: new ReCaptchaV3Provider(
      import.meta.env.VITE_RECAPTCHA_PUBLIC_KEY
    ),
    isTokenAutoRefreshEnabled: true,
  })

const FireAuth = getAuth(FireApp)
FireAuth.languageCode = "fr"

const Firestore = getFirestore(FireApp)

const FireFunction = getFunctions(FireApp, "europe-west3")

const FireStorage = getStorage(FireApp)

const isDev = import.meta.env.DEV

if (isDev) {
  // See all Firebase features ports in firebase.json
  connectAuthEmulator(FireAuth, "http://localhost:9099")
  connectFirestoreEmulator(Firestore, "localhost", 8080)
  connectFunctionsEmulator(FireFunction, "localhost", 5001)
  connectStorageEmulator(FireStorage, "localhost", 9199)
}

export { FireApp, FireAuth, Firestore, FireFunction, FireStorage }

我有一个函数 httpCallable ：

export const generateThings = functions
  .region("europe-west3")
  .runWith({
    enforceAppCheck: !isPreview,
  })
  .https.onCall((data, context) => {
    try {
      if (!context.auth) {
        const error = Error("Request not allowed")

        return send("unauthenticated", error)
      }

      const things: Things = data
      const userThings = generateThings(things)

      return send<Things>("ok", userThings, "Things generation success")
    } catch (error) {
      return send("cancelled", error)
    }
  })

我在这里使用：

const generateThings = httpsCallable<
  Things,
  ApiResponse<Things | ApiError>
>(FireFunction, "generateThings")

const generateWorkout = async (
  wkgArgs: WKGArgs
): Promise<ApiResponse<WKGWorkout | ApiError>> => {
  const { data } = await generateWKGWorkout(wkgArgs)

  return data
}

如果我在谷歌云控制台（云功能设置）中设置 allUsers 授权，一切正常，但如果我删除 allUser 授权，我会收到此 CORS 错误：

Access to fetch at 'https://europe-west3-workoutgen-staging.cloudfunctions.net/faStudioWKGgenerateWKGWorkout' from origin 'https://workoutgen-staging.web.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这让我有点困惑，在 firebase 文档中他们解释说你必须让 allUsers 才能工作，但这使得该功能在互联网上公开。

突然不明白 onCall 函数和 onRequest 相比有什么好处

有人明白吗？是否可以在没有 CORS 问题的情况下保留 on Call 私有函数？

Answer 1

您必须像这样在文件中导入 CROS：-

const cors = require('cors')({origin: true});

如果它不起作用，请回复我。