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.