CORS Issue with Firebase Emulator UI in Project IDX Environment

General
1

Title:

CORS Issue with Firebase Emulator UI in Project IDX Environment

Description:

I am experiencing persistent CORS (Cross-Origin Resource Sharing) issues when using the Firebase Emulator UI to connect to the Firestore Emulator within the Project IDX environment. Despite both services appearing to run under the same domain (*.cloudworkstations.dev), the browser blocks requests due to a missing Access-Control-Allow-Origin header.

Steps to Reproduce:

  1. I set up a Firebase Emulator Suite within Project IDX, including the following services:
  • Authentication Emulator (Port: 9099)
  • Firestore Emulator (Port: 8080)
  • Functions Emulator (Port: 5001)
  • Firebase Emulator UI (Port: 4000)
  1. Access the Firebase Emulator UI at the following URL:
  1. Interact with the Firestore Emulator from the Firebase Emulator UI.

Observed Behavior:

  • In the browser’s console, the following error occurs when the Emulator UI attempts to connect to the Firestore Emulator
    Access to manifest at 'https://4000-idx-motito-firebase-backend-1729546918230.cluster-rcyheetymngt4qx5fpswua3ry4.cloudworkstations.dev' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • Additionally, WebSocket connections fail, and authentication-related redirects result in cookie issues.
  • The issue occurs despite both services being hosted on the same *.cloudworkstations.dev domain, but with different subdomains or ports.

Error Details:

  1. CORS Policy Violation:
  • The browser blocks requests because the server response from Firestore Emulator does not include the Access-Control-Allow-Origin header.
  1. 302 Redirect Issues:
  • Requests for resources such as manifest.json are redirected with a 302 status code, which causes further CORS enforcement.
  1. WebSocket Failures:
  • WebSocket connections to wss://4000-idx-motito-firebase-backend… fail due to CORS-related issues.
  1. Cross-Site Cookie Issues:
  • A warning in the console mentions potential issues with reading cookies in a cross-site context, which could affect the forwarding of authentication tokens.

Troubleshooting Steps Taken:

  1. Checked Emulator Configuration:
    I verified the emulator setup in firebase.json, ensuring that all emulators are configured with correct ports and hosts. The configuration looks valid and matches the Project IDX environment.
  2. Updated Firebase Tools:
    I ensured that my Firebase CLI is up-to-date (firebase-tools), but the issue persists.

Environment:

  • Project IDX: Running the emulators in a cloud-based development environment provided by Google.
  • Browser: Google Chrome (Version 130.x, latest version).
  • Firebase Emulator Suite:
    • Firestore Emulator: localhost:8080
    • Functions Emulator: localhost:5001
    • Authentication Emulator: localhost:9099
    • Firebase Emulator UI: localhost:4000

Request for Support:

I would appreciate guidance on how to resolve these CORS issues in the Project IDX environment. It seems that the environment is treating requests from different subdomains or ports as cross-origin, even though the root domain remains the same (*.cloudworkstations.dev). Specifically:

  • Is there a way to configure CORS headers in the Firebase Emulator Suite on Project IDX?
  • Are there known restrictions or limitations in the Project IDX environment that could be causing this?
  • Could you provide any configuration changes or alternative approaches to handling CORS and WebSocket connections in this cloud-based setup?

Thank you for your assistance!

2

Hi @Tobi_Martins - both @rody and @davideast may have a lot of experience here :slight_smile:

3

@rody and @davideast can you help with this ?