Basic Firebase / Cloud Functions v2 / CORS question

[gregmatthews555]

So, I managed to call a Google Cloud Function v1 function using httpsCallable on the web app (in both dev/local, and prod) and then the corresponding onCall usage in my cloud function definition -- I don't get any CORS complaints and the function call works.

However, now that I'm upgrading to cloud functions v2 I am getting blocked by CORS

I am getting this error in dev, when running the React web app locally trying to call a deployed v2 cloud function:

Access to a fetch at 'https://<function URL>' from origin 'http://localhost:3000' 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.

The client code is as follows:

const testGen2func = async () => {

    const func = httpsCallable(functions, "testGen2bfunc")

    const result = await func({ value: "hello" })

    console.log("testGen2func", result)

}

The cloud function is as follows:

exports.testGen2bFunc = onCall(

    { region: AUSTRALIA_SOUTHEAST1, enforceAppCheck: true, cors: false },

    (data) => {

        console.log("data", data)

    }

)

package versions, in both main React app, and functions folder:

+-- firebase-admin@10.3.0
+-- firebase-functions@4.4.0
+-- firebase-tools@12.0.0

I have no clue why this is being blocked. I thought onCall was meant to deal with CORS. I also tried various value for the onCall 'cors attribute, incl. true, false, and corsWhitelist, which is defined as follows:

const corsWhitelist = ["http://localhost:3000"]

Can anyone please help me sort this out?

[gregmatthews555]

Also, extra information. my client side import is as follows:

import { httpsCallable } from "firebase/functions"

I was wondering if I need to import a v2 callable from another package? i.e. can the same httpsCallable be used to call both v1 and v2 functions?

[Prince_Tiwari]

Please Accept My Solution

Yes, you can use the same httpsCallable function to call both v1 and v2 callable functions in Firebase. The firebase/functions package exports the httpsCallable function, which provides a simple and easy-to-use interface for calling callable functions.

When calling a v2 callable function with httpsCallable, you should use the fully qualified name of the function, which includes the name of the project, the region, and the name of the function, like this:

arduinoCopy code

const functionName = 'projects/my-project/locations/australia-southeast1/functions/my-function'; const callable = httpsCallable(app.functions(), functionName);

Note that you should replace my-project, australia-southeast1, and my-function with the appropriate values for your function.

I hope this answers your question! Let me know if you have any further questions.

[gregmatthews555 · Accepted solution]

Well, wouldn't you know...I changed things around like you suggested and that didn't work, then when I changed it back it worked -- but i'd stupidly used a lowercase 'f' in the client code and uppercase 'F' in the server function def. I will give you the prize of accepting this as a solution, not because it was the solution, but maybe people like me can check spelling/case better in the future before posting 🙂