How to fix Firebase CORS errors in callable functions?

Question

I have a problem with Firebase and CORs, apparently it cannot reach the endpoint with errors like:

Access to fetch at 'https://europe-west2-XXX.cloudfunctions.net/fetchChatToken' from origin 'https://trato.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. service.ts:203

POST https://europe-west2-XXX.cloudfunctions.net/fetchChatToken net::ERR_FAILED (anonymous) @ service.ts:203 ... ...

error.ts:66 Uncaught (in promise) Error: internal at new t (error.ts:66) at error.ts:175 at e. (service.ts:276) at tslib.es6.js:100 at Object.next (tslib.es6.js:81) at a (tslib.es6.js:71)

I also checked the network tab on dev inspector (chrome) to check if the CORS header is there, i dont see it.

Also, I have been checking firebase functions logs and apparently is not being even invoked, the last line showing is the deployment.

the way that Im using it is this:

Front End side:

const functions = firebaseApp.functions('europe-west2');
export const fetchChatToken = async () => (await functions.httpsCallable('fetchChatToken')()).data;

Functions (Backend) side:

const ensureAuthentication = auth => {   if (!auth) throw new HttpsError("unauthenticated", "authentication required"); };

exports.fetchChatToken = functions.region("europe-west2").https.onCall((data, context) => {
    ensureAuthentication(context.auth);
    try {
      const { AccessToken } = twilio.jwt;
      const { ChatGrant } = AccessToken;

      const grant = new ChatGrant({ 
        serviceSid: conversationsid
      });
      const token = new AccessToken(accountsid, apikey, apisecret);
      token.addGrant(grant);
      token.identity = context.auth.uid;
      return token.toJwt();
    } catch (error) {
      console.error(error);
      throw new HttpsError("internal", "internal error");
    }   });

Callable functions use cors automatically internally, and you actually have no control over that. Please edit the question to show the code that isn't working the way you expect. — Doug Stevenson, Dec 07 '20 at 00:28
@DougStevenson i found the error was not in firebase preview channels its also in the default hosting. its everywhere but its not in the emulator. edited. — jjalonso, Dec 07 '20 at 02:19
running it on emulator, is no error, works perfect, deployed in firebase is not printing any log or calling, its just not being called, i can see the last log was on deployment time (I redeploy also to try) also con error tab, it doesnt show any error, but as a said, the functions are not being called aparently. — jjalonso, Dec 07 '20 at 03:25
Does this answer your question? [Enabling CORS in Cloud Functions for Firebase](https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase) — cwlau, Dec 07 '20 at 06:46
@cwlau nop. My one is callable functions and have no control on cors as Doug said — jjalonso, Dec 07 '20 at 11:54

score 2 · Answer 1 · edited Sep 21 '21 at 15:18

Unfortunately there many reasons possible for this CORS error. If the cloud function returns an "internal" error message it might be due to inconsistent Regions or errors in your cloud function code. My checklist for this error when creating a new cloud function:

Not matched Regions of Firestore-Project, Functions and Client side init cause a CORS Error
internal code errors inside the cloud functions cause this error
new function must be included in cloud function index file (if used)
cloud function name must match the string on client side invocation
delete cloud function in firebase dashboard before deploying new one after error

Agree. If error persists after following all these suggestions, deleting cloud function and redeploying might do the trick. — defvol, May 06 '22 at 02:33

score 1 · Answer 2 · answered May 14 '21 at 15:40

1

Make sure the function name referenced in the client is correct, see https://stackoverflow.com/a/62042554/1030246

answered May 14 '21 at 15:40

tazmaniax

406
1
6
13

score 0 · Answer 3 · answered Dec 07 '20 at 19:12

0

I got it solved changing it to us, basically removing the region, taking out the 'europe-wes2' region from the function declaration and from the function call it works fine again.

I assume there is some error on the firebase side.

answered Dec 07 '20 at 19:12

jjalonso

691
5
17

How to fix Firebase CORS errors in callable functions?

3 Answers3