CORS Issue Causing RestConnection Failed Error in AngularFire App

I'm developing an Angular application using AngularFire to interact with Firebase Firestore. When attempting to perform a specific query on Firestore, I'm encountering CORS errors and connection failures. I need help understanding why this is happening and how to fix it.

Error Messages

1.[Get & POST ERROR] ERROR

zone.js:2675
GET https://firestore.googleapis.com/google.firestore.v1.Firestore/Write... (Bad Request)

POST https://firestore.googleapis.com/v1/projects/prettyofsystem/databases/(default)/documents/shop/tJOmcKufDrBEfQwpyoxM:runAggregationQuery net::ERR_FAILED


2.[RestConnection RPC Error]

chunk-2OX4UKGE.js?v=e7a89523:77 [2024-10-24T15:14:33.417Z]
@firebase/firestore: Firestore (10.12.4): RestConnection RPC 'RunAggregationQuery' 0x1a504b0b failed with error: {"code":"unavailable","name":"FirebaseError"} url: https://firestore.googleapis.com/v1/projects/prettyofsystem/databases/(default)/documents/shop/tJOmcKufDrBEfQwpyoxM:runAggregationQuery request: {"structuredAggregationQuery":{"aggregations":[{"alias":"aggregate_0","count":{}}],"structuredQuery":{"from":[{"collectionId":"consult"}],"where":{"compositeFilter":{"op":"AND","filters":[{"fieldFilter":{"field":{"fieldPath":"client.id"},"op":"EQUAL","value":{"stringValue":"de1kRJEkF3K3EJ2RuZdU"}}},{"fieldFilter":{"field":{"fieldPath":"status.type"},"op":"EQUAL","value":{"stringValue":"Completed"}}}]}}}}}


3.[CORS Policy Error]

Access to XMLHttpRequest at 'https://firestore.googleapis.com/v1/projects/prettyofsystem/databases/(default)/documents/shop/tJOmcKufDrBEfQwpyoxM:runAggregationQuery' from origin 'http://localhost:8100' 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.


4.[INTERNAL ASSERTION FAILED]

Error: FIRESTORE (10.12.4) INTERNAL ASSERTION FAILED: Unexpected state


5.[Appcheck failed]

[2024-10-24T16:06:37.735Z] @firebase/firestore: Firestore (10.12.4): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError:

Código:

: Fetching auth token failed: AppCheck: Fetch server returned an HTTP error status. HTTP status: 403. (appCheck/fetch-status-error).
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.


[B]Query Detail FROM FirebaseAPIService [providedIn Root][/B]

import { setDoc, getCountFromServer } from '@angular/fire/firestore';
private firestore = inject(Firestore);
private docRef = (segment: string, documentId: string): DocumentReference<DocumentData> => {
    return doc(this.firestore, getPath(segment, documentId));
  };  

private collection = (path: string): CollectionReference<DocumentData> => {
    return collection(this.firestore, path);
  };

private query = (path: string, ...queryConstraints: QueryConstraint[]): FirestoreQuery<DocumentData> => {
return query(this.collection(path), ...queryConstraints);
  };

public async setDocument<T extends { id?: string }>(path: string, dto: T): Promise<string | null> {
    try {
      const docId = dto?.id && dto.id.length > 0 ? dto.id :  this._newIdSvc.getNewDocumentId();
      const newDocument = this.docRef(path, docId);
      const document = { ...dto, id: docId };
      await setDoc(newDocument, document);
      return docId;
    } catch (error) {
      console.error(error);
      return null;
    }
  }

public getCountByQuery(path: string, ...queries: QueryConstraint[]): Observable<number> {
    return defer(() => from(getCountFromServer(this.query(path, ...queries)))).pipe(
      startTraceByQuery(path, ...[...queries]),
      map(snapshots => snapshots.data().count),
      map(doc => {
        if (this.isDebugMode()) {
          console.log(`getCount: ${path} ${queryDescription(...[...queries])} `, doc);
        }
        return doc;
      }),
      catchError(error => {
        console.error(`getCount: ${path} ${queryDescription(...[...queries])} `, error);
        return of(0);
      })
    );
  }


[B]App.config.ts[/B]

const config: ApplicationConfig = {
  providers: [
    // Ionic
    provideSvgIcons(),
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular({ swipeBackEnabled: false, mode: 'md', navAnimation: routingAnimation }),
    importProvidersFrom(IonicModule.forRoot({ swipeBackEnabled: false, mode: 'md',
navAnimation:routingAnimation })),
    importProvidersFrom(IonicStorageModule.forRoot()),

    // Angular
    provideHttpClient(withFetch()),
    provideAnimations(),
    ...

    // Firebase initialization
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideRemoteConfig(() => getRemoteConfig(getApp())),
    provideAnalytics(() => getAnalytics(getApp())),
    provideFirestore(() => getFirestore(getApp())),
    provideStorage(() => getStorage(getApp())),
    provideFunctions(() => getFunctions(getApp())),
    provideMessaging(() => getMessaging(getApp())),
    provideDatabase(() => getDatabase(getApp())),
    provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        console.log('Initializing auth with indexedDBLocalPersistence');
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      }
      return getAuth();
    }),
    provideAppCheck(() => initializeAppCheck(getApp(), {
      provider: new ReCaptchaEnterpriseProvider(environment.WebSiteKey),
      isTokenAutoRefreshEnabled: true,
    })),

    // Root Services
    UserTrackingService,
    ScreenTrackingService,
    LanguageService,
    FirebaseApiService,
    PushNotificationService,
    AuthService,
    PushNotificationService,
    PrimeNGConfigService,
    MessageService,
    ConfirmationService,
    ToastMessageService,
  ],
};


[B]package.json[/B]

    "@angular/animations": "^18.2.1",
    "@angular/cdk": "18.2.1",
    "@angular/common": "^18.2.1",
    "@angular/core": "18.2.1",
    "@angular/fire": "^18.0.1",
    "@angular/forms": "^18.2.1",
    "@angular/localize": "^18.2.1",
    "@angular/material": "^18.2.1",
    "@angular/platform-browser": "^18.2.1",
    "@angular/platform-browser-dynamic": "^18.2.1",
    "@angular/router": "^18.2.1",
    "@angular/service-worker": "^18.2.1",
    "firebase": "10.12.4",

[INDENT]
[B]STEP THAT I HAVE TRIED[/B]

[LIST=1]
[*]
[B]Updating Angular & Firebase versions:[/B] No improvement in the CORS errors despite upgrading/downgrading versions.


[*]
[B]Modifying CORS settings in Google Cloud Storage:[/B] No effect on Firestore requests.
{ "origin": ["*"], "method": ["GET", "POST", "PUT", "DELETE"], "responseHeader": ["Content-Type"], "maxAgeSeconds": 3600 } ]


[*]
[B]Attempting SSR (Server-Side Rendering):[/B] Could not complete setup due to lack of documentation. (reverted back)


[*]
[B]Reverting to previous stable versions:[/B] Errors persisted after rollback.


[*]
[B]Using Firebase SDK directly without @angular/fire:[/B] Same errors, indicating @angular/fire wasn't the issue.


[*]
[B]Registering an App Check debug token:[/B] Did not resolve the issue. (I have provided the debug token to the firebase console app check, but I am not sure where to use in app.config.ts)

[/LIST]

[B]Despite these steps, the CORS and connection issues remain unresolved.[/B]
[/INDENT]

These errors occur consistently, and none of the attempted solutions have resolved the issue.

Additional Information:

I've confirmed that the Firebase configuration (environment.firebase) is correct and matches the settings in the Firebase console. Firestore security rules have been checked and should allow the read operations I'm attempting. The application was working previously, and the issue started occurring after updating some dependencies, though reverting did not fix it. [B]I'm running the application locally using ionic serve, which serves on http://localhost:8100 and production page.[/B] Question: Given these troubleshooting steps and the persistent CORS errors when making Firestore queries, what could be causing this issue, and how can I resolve it?

[url="https://stackoverflow.com/questions/79124543/cors-issue-causing-restconnection-failed-error-in-angularfire-app"]Continue reading...[/url]