Fixing the cors error in firebase storage on web

By Vinay Saurabh • Published on May 30, 2025

This article describes how you can fix this issue in any project on Google Cloud Storage

Understanding the CORS Error

Why browsers block cross-origin requests and how it affects Firebase Storage.

• Browsers enforce CORS to protect users from malicious sites.
• Firebase Storage, built on Google Cloud Storage, blocks unknown origins by default.
• CORS error appears when your frontend tries to access Firebase Storage directly without proper configuration.

Common Scenarios That Trigger CORS

Typical operations that lead to CORS issues in web apps.

• Uploading files directly from a frontend app
• Fetching public URLs from a different domain
• Using signed URLs without setting CORS rules

Step 1: Install Google Cloud CLI

You'll need the gcloud CLI to modify Firebase Storage CORS settings.

1. Download and install from: cloud.google.com/sdk/docs/install
2. Login: gcloud auth login
3. Set your project: gcloud config set project [your-project-id]

Step 2: Define Your CORS Policy

Create a JSON file that specifies allowed origins and methods.

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

Step 3: Apply the CORS Configuration

Upload your policy to Firebase Storage using the CLI.

gsutil cors set cors.json gs://[your-bucket-name]

To find your bucket name, check Firebase Console → Storage → Files tab.

Verifying the Fix

How to confirm if the CORS error is resolved.

• Clear browser cache or use an incognito window
• Retry your fetch or upload request
• No 'Access-Control-Allow-Origin' error should appear in console

Security Best Practices

Keep your CORS rules tight in production environments.

• Use exact domain names instead of wildcards
• Allow only required methods (e.g., GET, POST)
• Avoid exposing sensitive headers unless needed

Final Thoughts

A quick fix that avoids hours of debugging.

Setting proper CORS rules is essential for frontend access to Firebase Storage. Do it once, do it right, and keep your project secure.