Facing CORS issue while fetching token from firebase using firebase sdk

[mohammedaamir2409]

Operating System

Windows 11

Environment (if applicable)

Angular

Firebase SDK Version

11.3.1

Firebase SDK Product(s)

Messaging

Project Tooling

Angular with webpack

Detailed Problem Description

While fetching token from firebase using getToken method, facing cors issue and unable to get token.

I seem to be running into an edge case where the OPTIONS request to https://firebaseinstallations.googleapis.com/v1/projects/***/installations/***/authTokens:generate results in a CORS error.

I am not sure whether this is an issue on the server side or in the client code that does not gracefully handle the CORS error. But since others seem to be reporting this recently, I believe it should be investigated.

Steps and code to reproduce issue

const app = initializeApp(PushNotificationConfig.firebaseConfig);

const messaging = getMessaging(this.firebaseapp);

navigator.serviceWorker.register('/agent/firebase-messaging-sw.js', {
scope: '/agent/'
}).then((registration)=>{
registration.update();

navigator.serviceWorker.ready.then((registeredRegistration)=>{
  setTimeout(()=>{
    try {
      
      getToken(this.afMessaging, 
        { 
          vapidKey: PushNotificationConfig.firebaseConfig.vapidKey,
          serviceWorkerRegistration : registeredRegistration as any 
        }).then((currentToken) => {
        if (currentToken) {
         
        } 
      }).catch(() => {
      });
  } catch (error) {
      console.error("Token retrieval error:", error);
      throw error;
  }
  }, 1000)
 
  
})

})

[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.

[dlarocque]

Hey, @mohammedaamir2409 the code you shared is not enough information to reproduce the CORS issue you described. Please share full reproduction steps.

Is this a duplicate of #2364?

[mohammedaamir2409]

Here is the code to reproduce this issue

const firebaseapp = initializeApp(PushNotificationConfig.firebaseConfig);
const messaging = getMessaging(this.firebaseapp);


navigator.serviceWorker.register('/agent/firebase-messaging-sw.js', {
    scope: '/agent/'
  }).then((registration)=>{
    registration.update();
    navigator.serviceWorker.ready.then((registeredRegistration)=>{
      setTimeout(()=>{
        try {
         getToken(this.afMessaging, 
            { 
              vapidKey: PushNotificationConfig.firebaseConfig.vapidKey,
              serviceWorkerRegistration : registeredRegistration as any 
            }).then((currentToken) => {
            console.log(token)
          }).catch(() => {
            // this.toastService.failureToast(err)
          });
      } catch (error) {
          console.error("Token retrieval error:", error);
          throw error;
      }
      }, 1000)
    })
  })

Let me explain the above code:

Initialising firebase app

const firebaseapp = initializeApp(PushNotificationConfig.firebaseConfig);

Fetching Token

const messaging = getMessaging(firebaseapp);


// Registering service worker and fetching token 

navigator.serviceWorker.register('/agent/firebase-messaging-sw.js', {
    scope: '/agent/'
  }).then((registration)=>{
    registration.update();
    navigator.serviceWorker.ready.then((registeredRegistration)=>{
      setTimeout(()=>{
        try {
         getToken(messaging , 
            { 
              vapidKey: PushNotificationConfig.firebaseConfig.vapidKey,
              serviceWorkerRegistration : registeredRegistration as any 
            }).then((currentToken) => {
            console.log(token)
          }).catch(() => {
            // this.toastService.failureToast(err)
          });
      } catch (error) {
          console.error("Token retrieval error:", error);
          throw error;
      }
      }, 1000)
    })
  })

Also we need to know in which cases 403 cors error is thrown.

We are unable to resolve this issue from past 3 months, and we need a proper solution or root cause for this issue.
Also we need to know why sometimes firebase didnt set proper response headers which results in cors issue. For some devices, Firebase cloud messaging works properly but sometimes throws cors issues.

[dlarocque]

@mohammedaamir2409 The code you sent does not make it clear why you might be getting a CORS error on Installations requests. Without more details about when this issue occurs, we can't reproduce the issue.

But since others seem to be reporting this recently, I believe it should be investigated.

Where have you seen reports of this recently? Could you share these reports? Perhaps they have more information about when this issue occurs that could be helpful to us.

[mohammedaamir2409]

@dlarocque, above mentioned code is overall code for implementing fcm in our application. Can you please share which details to share. I have shared code, also explained the code. We just want you to check in which cases your api returns 403 error or cors error. Because sometimes fcm works in production and sometimes throws cors issue.

Just wanted to know in which cases your api throws 403 error. Please understand what we are asking instead of simply asking more details. I have shared entire code of implementation. Please look into this cors issue as others might have also facing same problem.

[DellaBitta]

Hi @mohammedaamir2409,

I think your question might be better answered by opening a ticket with the Firebase Support team. They monitor and debug issues with endpoints, whereas we're in charge of the SDKs. An endpoint returning intermittent CORS error from your stable code and app configuration points to this not being an issue with the SDK. I hope this helps!

[google-oss-bot]

Hey @mohammedaamir2409. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[mohammedaamir2409]

Hi @DellaBitta , I have created ticket to firebase team many times but they also repeating same reply. I just wanted to know in which cases your apis throws cors error. If this case is found, it will be easy for us to find root cause and solution. I was not expecting this type of response from firebase team especially.

[hsubox76]

The reason we are redirecting you to Firebase Support is not because we don't want to answer your question, it's because this is the SDK team, and we're in control of the client SDK. We're not able to help answer your questions about the endpoint because we don't manage the endpoint. I agree this looks like a Firebase problem but unless you can identify something in the client SDK code causing it, this isn't the team that is able to fix it.

We were trying to help see if anything in the client SDK was causing it by attempting to reproduce the error ourselves with your code, but we can't. Since we can't reproduce it ourselves, it seems like there's something specific to your environment or connection causing this and maybe Firebase Support could walk you step by step through it and see if they could pinpoint where.

We can also try to forward the error along to the right team but we don't have enough information to explain it to them, other than to say that one user reports a CORS error, sometimes, which we are unable to reproduce ourselves. If you could show other users that have this problem (you said there are many other cases, can you link them?), or if you could find anything in common in the cases where the CORS errors are thrown (region? time? browser?), that would be really helpful in giving the other team something to look at, and impress them with the urgency.