title: How to fix Firebase CORS errors in callable functions?
body: <p>I have a problem with Firebase and CORs, apparently it cannot reach the endpoint with errors like:</p>
  <blockquote>
  <p>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</p>
  </blockquote>
  <blockquote>
  <p>POST
  <a href="https://europe-west2-XXX.cloudfunctions.net/fetchChatToken" rel="nofollow noreferrer">https://europe-west2-XXX.cloudfunctions.net/fetchChatToken</a>
  net::ERR_FAILED (anonymous) @ service.ts:203 ... ...</p>
  <p>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)</p>
  </blockquote>
  <p>I also checked the network tab on dev inspector (chrome) to check if the CORS header is there, i dont see it.</p>
  <p><a href="https://i.stack.imgur.com/VpghX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VpghX.png" alt="enter image description here" /></a></p>
  <p>Also, I have been checking firebase functions logs and apparently is not being even invoked, the last line showing is the deployment.</p>
  <p>the way that Im using it is this:</p>
  <p><strong>Front End side:</strong></p>
  <pre><code>const functions = firebaseApp.functions('europe-west2');
  export const fetchChatToken = async () =&gt; (await functions.httpsCallable('fetchChatToken')()).data;
  </code></pre>
  <p><strong>Functions (Backend) side:</strong></p>
  <pre><code>const ensureAuthentication = auth =&gt; {   if (!auth) throw new HttpsError(&quot;unauthenticated&quot;, &quot;authentication required&quot;); };
  
  exports.fetchChatToken = functions.region(&quot;europe-west2&quot;).https.onCall((data, context) =&gt; {
      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(&quot;internal&quot;, &quot;internal error&quot;);
      }   });
  </code></pre>