angularfirebasecorsangularfirezone.js

Firebase CORS Error in Angular "~13.1.0" when I use import Angular Fire Performance Module

For the past month, I have been encountering a CORS error in my Angular application, as indicated in the screenshot and text provided below.

My application's angular version is "~13.1.0"

Packages used in my Angular application:

The modules utilized from this package include "AngularFireModule", "AngularFirePerformanceModule", and "PerformanceMonitoringService".

The errors I am getting are:

Access to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/<Project-Name>/installations' from origin 'http://localhost:4300' 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.

POST https://firebaseinstallations.googleapis.com/v1/projects/<Project-Name>/installations net::ERR_FAILED

TypeError: Failed to fetch
    at zone.js:1518:1
    at proto.<computed> (zone.js:973:1)
    at InstrumentHooks.js:97:51
    at index.esm2017.js:174:53
    at index.esm2017.js:119:26
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new ZoneAwarePromise (zone.js:1429:1)

Just to clarify, I just want to use only the mentioned three packages and import it in the application, other than that I don't want to use any other modules from firebase.

There are few solutions I tried but didn't work, which are given below:

  1. Firebase Storage and Access-Control-Allow-Origin
  2. https://www.reddit.com/r/Firebase/comments/oo8jhc/how_to_add_cors_headers_to_firebase_storage/

Also, I tried removing other packages to see if that was causing any conflicts but that also didn't work.

Solution

  • I'm pleased to inform you that the problem has been resolved using the solution outlined in this StackOverflow discussion: Google Maps Javascript API Version 3.54 breaks Angular Google Maps 13.2.2.

    You can find more details about the solution by following the provided link.