How to Fix CORS Errors in Firebase Storage (Including Firebase Studio)

If you’ve built something in Firebase Studio or Firebase Hosting and tried to access files in Firebase Storage, you’ve probably seen the dreaded:

Access to fetch at ‘https://firebasestorage.googleapis.com/...' from origin ‘https://your-site.com’ has been blocked by CORS policy

This happens because Firebase Storage (which is really a Google Cloud Storage bucket) blocks requests from other websites unless you explicitly allow them using a CORS (Cross-Origin Resource Sharing) configuration.

Firebase Studio makes it easy to upload and host files, but it doesn’t automatically configure CORS for you. If you’re trying to serve images, videos, JSON files, or other assets to your site, you need to set this up manually.

This guide walks you through how to fix Firebase Storage CORS errors, specifically for projects built in Firebase Studio or Firebase Hosting.

Why CORS Errors Happen in Firebase Studio & Firebase Storage

CORS exists for security. Without it, any site could make requests to your Firebase Storage bucket and access potentially sensitive files.

When you create a project in Firebase Studio and upload files to Firebase Storage, those files live in a Google Cloud Storage bucket. By default, that bucket only allows direct access from the same origin. Your React app, static HTML site, or even another Firebase Hosting site will be blocked unless you add your site’s domain to the CORS configuration.

Step 1: Install gsutil

gsutil is Google’s command-line tool for managing Cloud Storage (and by extension, Firebase Storage).

Official instructions: Install gsutil

If you don’t have it yet, install via Google Cloud SDK:

1
2
3

curl https://sdk.cloud.google.com | bash
exec -l $SHELL
gcloud init

Step 2: Log In to Your Firebase Account

Once installed, log in:

1

gcloud auth login

Select the Google account linked to your Firebase Studio project.

Then set the active project:

1

gcloud config set project YOUR_PROJECT_ID

Tip: You can find YOUR_PROJECT_ID in Firebase Console → Project Settings → General.

Step 3: Find Your Firebase Storage Bucket Name

Firebase Storage buckets usually follow this format:

PROJECT_ID.appspot.com

Example:

If your project ID is my-firebase-studio-app, your bucket will be:

my-firebase-studio-app.appspot.com

To confirm:

1

gcloud storage buckets list

Step 4: Create Your cors.json File

This JSON file tells Firebase Storage which domains can access your files.

Basic example for a single site:

1
2
3
4
5
6
7
8

[
  {
    "origin": ["https://your-example-website.web.app"],
    "method": ["GET"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

Allowing Multiple Methods

If you need uploads, deletions, or updates from your site:

1
2
3
4
5
6
7
8

[
  {
    "origin": ["https://your-example-website.web.app"],
    "method": ["GET", "POST", "DELETE", "PUT"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

Allowing All Origins (For Testing)

For quick testing, you can allow * (but don’t use in production):

1
2
3
4
5
6
7
8

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

⚠️ Warning: This allows anyone to make requests to your bucket.

Step 5: Apply the CORS Rules to Your Firebase Storage Bucket

Run:

1

gcloud storage buckets update gs://example_bucket --cors-file=cors.json

Example:

1

gcloud storage buckets update gs://my-firebase-studio-app.appspot.com --cors-file=cors.json

Step 6: Test Your Firebase Studio CORS Fix

Once applied, reload your site and try fetching from Firebase Storage again.

If you still see CORS errors:

• Make sure your exact site domain (including https://) is in cors.json
• Clear your browser cache — CORS results can be cached
• Double-check you updated the right bucket

Common Firebase Studio CORS Issues

1. Wrong Bucket Name – Firebase Studio can use multiple buckets if you’ve enabled multi-region storage. Always check with gcloud storage buckets list.
2. Missing Methods – If your front end uploads files but your CORS config only allows "GET", uploads will fail.
3. Using localhost in Development – Add "http://localhost:3000" (or whatever your dev port is) to the "origin" list for local testing.
4. Mixing Firebase Hosting & Storage – Just because your files are served via Firebase Hosting doesn’t mean they skip CORS rules if they live in Firebase Storage.

TL;DR — Quick Fix for Firebase Studio CORS Errors

1. Install gsutil

2. Find your Firebase Storage bucket name

3. Write cors.json with your allowed origins

4. Run:

   1	gcloud storage buckets update gs://YOUR_BUCKET_NAME --cors-file=cors.json

5. Test and adjust methods/origins as needed.

✅ That’s it — your Firebase Studio project should now be able to serve files from Firebase Storage without CORS errors.