If your app is built on FlutterFlow + Firebase and your images refuse to load when you publish or preview your project… 👇
The problem is NOT FlutterFlow. It’s your Firebase Storage CORS settings.
When you first upload images to Firebase Storage, everything works fine inside FlutterFlow because the builder uses its own environment.
But when you deploy your app, browsers enforce CORS (Cross-Origin Resource Sharing) rules.
If your Firebase bucket has NO CORS file, your images will not display — they’ll fail silently with CORS errors.
✅ The Fix: Create & Upload a CORS File for Your Storage Bucket
You must manually add a CORS configuration to your Firebase Storage bucket through the Google Cloud Console.
The CORS file should include:
Your allowed domain(s) — FlutterFlow app URL, custom domain, localhost for testing, etc.
Allowed methods like
GET,POST,PUT, etc.Allowed headers
Max age
Once this file is uploaded, boom 🚀 — your images start loading instantly!
🎥 Watch the full step-by-step tutorial here:
👉 https://www.youtube.com/watch?v=c9aPlz-DQtI
The video explains:
What CORS is
Why Firebase blocks your image requests
How to create the JSON CORS file
How to apply it through Google Cloud Console
How to test that everything works
🌟 Don’t skip this step!
Every FlutterFlow project using Firebase Storage needs proper CORS rules.
Without it, your images will work in the editor but fail in the real world.
If this saves you hours of debugging, make sure to help another developer too. Happy building! 💙🚀