Firebase onCall CORS issue [duplicate]

This question already has answers here: Enabling CORS in Cloud Functions for Firebase (32 answers) Closed 9 hours ago.

I just made a firebase project with react and vite, I have configured my application as follows :

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 }

I have a function 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)
    }
  })

that I use here :

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
}

If I set allUsers authorizations in google cloud console (Cloud functions settings) everything work , but if I remove allUser authorisaion I get this CORS error :

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.

It's a bit confusing for me, in the firebase documentation they explain that you have to put allUsers for it to work, but that makes the function public on the internet.

Suddenly I do not understand the interest of the onCall function compared to the onRequest

anyone understand? Is it possible to keep an on Call private function without having a CORS problem?

---

You have to import CROS in your file like this:-

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

Please revert me if it does not work.