Error trying to add cors.json file in firebase project

Question

I came accross an error when trying to add cors.json file to my Firebase project. I have a budget app created with React and powered by authentification and cloud firestore and provided by Firebase.

On my localhost everything works fine: I sign in, add expenses etc. But once I deployed my app to render.com I stumbled onto an error:

Access to fetch at 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2Fbudget-app-react-3f8a6%2Fdatabases%2F(default)&RID=2186&CVER=22&X-HTTP-Session-Id=gsessionid&zx=qv2osyi6ocl&t=1' from origin 'https://bud-app.onrender.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

logger.ts:115 [2023-08-03T17:41:34.095Z] @firebase/firestore: Firestore (9.23.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed 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.

First solution that I tried was to add cors.json file via cloud shell terminal and editor:

1. I created JSON file with the following config

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "DELETE", "PUT"],
    "maxAgeSeconds": 3600
  }
]

2. Entered terminal and typed command where budget-app-react-3f8a6.appspot.com is my storageBucket in firebaseConfig

gsutil cors set cors.json gs://budget-app-react-3f8a6.appspot.com

And then I received an error:

Setting CORS on gs://budget-app-react-3f8a6.appspot.com/... NotFoundException: 404 The specified bucket does not exist.

Second I tried to solve the problem with gcloud CLI. After following the documentation step-by-step I received basically the same error:

gs://budget-app-react-3f8a6 not found: 404.

Maybe someone could help me with solving this CORS problem I have?

Answer 1

The error message gs://budget-app-react-3f8a6 not found: 404 means the bucket you want to use isn't available. To fix this:

1. Go to your Firebase settings.

2. Click on your project.

3. Choose Storage on the left.

4. Select the Browser tab.

5. Find the correct bucket name under Bucket.

If the name is correct, check if the bucket exists using this terminal command:

gsutil ls gs://BUCKET_NAME

Replace BUCKET\_NAME with your Firebase storage bucket's name.

If the bucket doesn't exist, create it using the gsutil tool:

1. Open a terminal.

2. Install gsutil by typing:

pip install gsutil

3. Create the bucket:

gsutil mb gs://BUCKET_NAME

Replace BUCKET_NAME with your Firebase storage bucket's name.

Once the bucket is ready, set CORS:

1. Open a terminal.

2. Navigate to the folder with cors.json.

3. Run this command:

gsutil cors set cors.json gs://BUCKET_NAME

Replace BUCKET\_NAME with your Firebase storage bucket's name.

If you still face issues, verify your permissions to change CORS in the Firebase settings under IAM & Admin.