When you deploy a web app to a custom domain (e.g., https://www.yourapp.com), your app’s origin is different from your Firebase Storage bucket’s origin. Browsers block these cross-origin requests unless you explicitly allow them with CORS. So we’ll add CORS rules to your Storage bucket that allow your web app to load images.
What you’ll need
Your Firebase project ID (e.g., my-project-123).
Your Storage bucket name (usually your-project-id.appspot.com unless you created a custom bucket).
Access to Google Cloud Console.
Step 1) Open Cloud Shell
Go to Google Cloud Console.
Click the Activate Cloud Shell icon (top-right) and wait for the terminal to load.
Step 2) Target the correct Firebase project
Run this in Cloud Shell (replace with your actual project ID):
gcloud config set project your-firebase-project-id
This ensures all following commands apply to the right project.
Step 3) Create a cors.json file with your allowed origins
Create a file named cors.json in Cloud Shell. A safe, minimal rule that allows read-only access for all origins is:
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
If you prefer to lock it to just your site, change "origin": ["*"] to your exact domain(s), e.g.: "origin": ["https://www.example.com"]
If you use authenticated downloads, include headers you need, for example:
"origin": ["<https://www.example.com>"],
"method": ["GET"],
"responseHeader": ["Content-Type", "Authorization"],
"maxAgeSeconds": 3600
(“Allowed headers” are specified via responseHeader for the Google Cloud Storage CORS schema.) After creating the file, you can run ls to confirm it’s there.
Tip: In Cloud Shell you can create/edit the file with nano cors.json or the built-in editor (pencil icon).
Step 4) Apply the CORS rules to your Storage bucket
Run (replace the bucket name):
gcloud storage buckets update gs://your-google-storage-bucket-name --cors-file=cors.json
This attaches the rules in cors.json to your bucket.
Step 5) (Optional) Verify the configuration
Run:
gcloud storage buckets describe gs://your-google-storage-bucket-name --format="default(cors_config)"
You should see the same origins, methods, and max age that you defined in cors.json.
Common pitfalls (and quick checks)
Wrong project selected: If the command says the bucket doesn’t exist, re-run Step 2 with the correct your-firebase-project-id.
Wrong bucket name: Your default bucket is typically <project-id>.appspot.com. Confirm in Firebase Console → Build → Storage → Files (look at the bucket name in the URL or settings).
Forgetting HTTPS in origins: Origins must include the scheme (e.g., https://www.example.com), not just the domain.
Headers for signed/authorized access: If you load files that require authorization, include "responseHeader": ["Authorization","Content-Type"] so the browser can send/read those headers.
Caching delay: After changing CORS, give your browser a hard refresh (or clear cache) to ensure the new rules are respected.
For more details, please review the official firebase docs on CORS configuration