Firebase Callable Function + CORS

Question

I\'m trying to call a callable Cloud Function from my app, but I\'m facing CORS issues.

I can\'t enable Cors since I don\'t have access to the request and response

Answer 1

For anyone looking at this post Jan 2020..

Found this answer on Reddit (https://www.reddit.com/r/reactjs/comments/fsw405/firebase_cloud_functions_cors_policy_error/)

Turns out on 15th Jan 2020, Google changed the security settings where all new functions no longer have a Cloud Functions Invoker. This means that all newly created functions will have their access forbidden, thus resulting in a CORS policy block.

Here is how you fix it, as it's not all that obvious:

https://cloud.google.com/functions/docs/securing/managing-access-iam#allowing_unauthenticated_function_invocation

Answer 2

I previously had deployed my function as an HTTP function (https.onRequest), then switched to a callable function (https.onCall). Firebase did not recognize this change.

I solved the problem by removing the function and deploying without it, then putting the function back in and deploying again.

Answer 3

My issue was not with CORS, but with my error handler. Instead of rejecting the promise, I've used throw directly in the catch handler.

catch((err) => {
  throw new functions.https.HttpsError('unknown', err.message, err)
})

Answer 4

For those facing this error after enabling firebase on an existing GCloud project, there is some complexity which is not taken care of automatically as it would be if it were just a firebase app.

I had this specific problem because I wanted my firebase function to be publicly accessible, but you have to specifically configure this if you're using google's Cloud Functions.

Here are the steps to fix:

1. Go to the cloud function tab
2. Select your cloud function (check box)
3. Click "Add members" under Permissions tab in the right side
4. Enter "allUsers"
5. under "New memebers" Select Role as "Cloud Functions -> "Cloud Functions Invoker"
6. Save
7. Test your cloud function by just pasting it in the browser

Cheers

Answer 5

For anybody else who has arrived here searching firebase callable functions cors errors, here's my checklist:

1. Ensure the function is deployed.
2. Ensure the function name is correct. I was calling recalculatY when it should have been recalculateY. Got a cors error for some reason.
3. Ensure the function code itself is not throwing an error. Use the emulator to help. This didn't throw a cors error still helpful to know.
4. Ensure your regions match - I am using europe-west2. I had to both deploy the function with that region, and call it using the region. For a while, I assumed the client would infer the correct region if the function name was correct. That was not the case.

Deploying a callable function to a specific region:

// This is the file in which you define your callable function.
const functions = require('firebase-functions');
...
exports.yourFunc = functions.region('europe-west2').https.onCall(async (data, context) => {
    ...
})

Calling a function in a specific region from the client (in this case, a vuejs web app):

// In my case, this is a vuex store file, but it is safe to assume this is plain old javascript
import firebase from 'firebase/app'
import 'firebase/functions'
...
firebase.app().functions('europe-west2').httpsCallable('yourFunc')

Note: firebase.app().function... vs firebase.app.function...

Answer 6

1. Errors should be as given in https://firebase.google.com/docs/reference/functions/functions.https.HttpsError
2. I deployed callable function after changed function name and it's working.