Fixing the cors error in firebase storage on web

By Vinay Saurabh • Published on

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

Fixing the cors error in firebase storage on web

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.