CORS error when using getToken() for FCM token

[Rafi2798]

Operating System

Windows and MAC

Environment (if applicable)

Angular

Firebase SDK Version

11.6.0

Firebase SDK Product(s)

Messaging

Project Tooling

Firebase: 11.6.0
Angular: 18.2.6
OS: Windows and MAC
Browser: All

Detailed Problem Description

navigator.serviceWorker.register('/agent/firebase-messaging-sw.js', {
    scope: '/agent/'
  }).then(async (registration)=>{
    getToken(messaging, {
      vapidKey: firebaseConfig.vapidKey,
      serviceWorkerRegistration: sw
    }).then((currentToken) => {
      if (currentToken) {
        console.log(currentToken);
      }
    }).catch(() => {
      //
    });
  })

The above code gives me an error in the console. My web application is hosted under this baseHref ("/agent"), and the service worker file (firebase-messaging-sw.js) is also located under this root ("/domain/agent").

Access to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/https://crm-pu.firebaseio.com/installations' from origin 'http://ribaac.com' 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.

Steps and code to reproduce issue

navigator.serviceWorker.register('/agent/firebase-messaging-sw.js', {
    scope: '/agent/'
  }).then(async (registration)=>{
    getToken(messaging, {
      vapidKey: firebaseConfig.vapidKey,
      serviceWorkerRegistration: sw
    }).then((currentToken) => {
      if (currentToken) {
        console.log(currentToken);
      }
    }).catch(() => {
      //
    });
  })

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[Rafi2798]

Hi Team,

Do you have any updates on this? We are still facing this issue, and our customers keep on reporting that the notification is not working

[seaders]

Hey @Rafi2798 taking a look at your issue, if what you say here,

Access to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/https://crm-pu.firebaseio.com/installations' from origin 'http://ribaac.com/' has been blocked by CORS policy...

Is correct, I'm 99% sure your configuration is incorrect, specifically your projectId. That URL is generated from https://github.com/firebase/firebase-js-sdk/blob/main/packages/installations/src/functions/common.ts#L33, from

  return `${INSTALLATIONS_API_URL}/projects/${projectId}/installations`;

but, per your URL, that says your projectId is https://crm-pu.firebaseio.com, but that can't be right,

Are the rest of your fb services working right with that projectId? Tbh, I can't believe that they are.

[dlarocque]

As @seaders explained, your projectId seems to be malformed, likely containing a URL rather than a project ID string.

Additionally, using FCM and service workers requires a secure context, so you must serve your application over HTTPS (https://ribaac.com) for domains other than localhost. Try correcting your projectId to be the one you can find the in the Firebase Console, and switch your hosting to HTTPS.

[Rafi2798]

Hi @seaders / @dlarocque

We have already debugged the code and ensured the configurations are correct. Please find the screenshots below

I guess your side missed adding this header, "Access-Control-Allow-Origin" is restricting requests in the browser. Could you please check and provide the solution ASAP?. our customers keep on escalating this issue...

Regards,
Rafi R

[dlarocque]

@Rafi2798
Thanks for confirming the projectId is correct. Could you try switching to HTTPS? As I mentioned, FCM is not expected to work in non-secure contexts such as strictly HTTP.

[Rafi2798]

Hi @dlarocque / @seaders

Yes, our application only works with HTTPS.

As I already mentioned, I guess your side missed adding this header, "Access-Control-Allow-Origin" is restricting requests in the browser. Could you please check and provide the solution ASAP?.

Regards,
Rafi R

[hsubox76]

This is the error you originally reported:

Access to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/https://crm-pu.firebaseio.com/installations' from origin 'http://ribaac.com/' 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.

We discovered two problems, which you said you have now fixed.

Can you provide the full error you are getting now? I assume it looks like this after those two fixes:

Access to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/bolddesk-mobile-app/installations' from origin 'https://ribaac.com/' 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 error is coming from Firebase Installations, which is a dependency of FCM, and not the messaging SDK itself, so your service worker domain probably isn't the problem.

I looked around and one possible reason for the message is configuration of the API restrictions in Console. This should only be a problem if you are using an old project that didn't originally use installations, or you have changed your configuration. Any new Firebase project should have this all automatically configured. https://stackoverflow.com/questions/58495985/firebase-403-permission-denied-firebaseerror-installations-requests-are-blo/58496014#58496014

[Rafi2798]

Hi @hsubox76

The issue has not been resolved yet, we are still facing the same problem.