Blocked by CORS when fetching 'firebase' for web notifications

We have developed a PWA using javascript and have followed the docs to setup web push notifications using firebase. 

Is there something in our firebase console that needs to be enabled or setup to allow CORS.

The error is similar to this:

"Access to fetch at 'https://firebase.googleapis.com/v1alpha/projects/-/apps*****' from origin 'http://localhost:4746' 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 app uses javascript and has installed the firebase SDK. 

it pulls the firebase .js files from gstatic using version 9.22.0. 

Any advice is appreciated.

Solved Solved
1 2 3,582
1 ACCEPTED SOLUTION

I found the solution, and the finger points back at me.

I had added a package for BlazorApplicationInsights which required setup code in index.html. 

Inside that setup code, CORS was being required on all calls.:

<script>

...

cfg: {
connectionString: "InstrumentationKey=****",
enableCorsCorrelation: true,
enableRequestHeaderTracking: true,
enableResponseHeaderTracking: true
}
});</script>
 
Removing this fixed my issue with CORS.
 
Thank you

View solution in original post

2 REPLIES 2

Hi @mobileappdev,

Welcome to the Google Cloud Community!

You should look into this Stack Overflow Post in Enabling CORS in Cloud Functions for Firebase.

You can also try to add the origin manually by following these steps:

  1. Go to your Firebase console and select your project.
  2. Open the Cloud Messaging tab and scroll to the Web configuration section
  3. In the web push certificates tab, click on "update web push certificates"
  4. Click the add button and add the origin you want to allow for your PWA ('http://localhost:4746') and save your changes

You can also get in touch with Google Cloud Support if the above options don't work.

Let me know if it helped, thanks!

I found the solution, and the finger points back at me.

I had added a package for BlazorApplicationInsights which required setup code in index.html. 

Inside that setup code, CORS was being required on all calls.:

<script>

...

cfg: {
connectionString: "InstrumentationKey=****",
enableCorsCorrelation: true,
enableRequestHeaderTracking: true,
enableResponseHeaderTracking: true
}
});</script>
 
Removing this fixed my issue with CORS.
 
Thank you
Top Labels in this Space