Setup - Configure CORS (Android & Web)

🌐 What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature that controls how web pages in one domain can request resources from another domain. For Flutter Web apps using Firebase Storage, CORS configuration is essential to allow secure access to files like profile pictures and attachments.

Step 8: Configure CORS for Firebase Storage

⚠️ Important: CORS configuration is required for Flutter Web apps to access Firebase Storage files. While CORS enables access, Firebase Storage security rules ensure that only authenticated users can read or write files. Without proper CORS setup, browsers may block file access, affecting web app functionality.

🔒 Security Note: The configuration below uses "origin": ["*"] which allows any website to access your storage. For production apps, consider restricting origins to only your specific domains for enhanced security.

Instructions to Configure CORS for Firebase Storage

Follow these simple steps to configure CORS for your Firebase Storage bucket. This ensures that your Flutter web app can access files like profile images without browser restrictions.

1Install Google Cloud CLI

Download and install the Google Cloud CLI.
After installation, open the Google Cloud SDK Shell, Command Prompt, PowerShell, or the terminal in your IDE (e.g., Android Studio).

2Authenticate and Set the Firebase Project

Run the following command in your terminal to authenticate with your Google account:

gcloud auth login

This will open a browser window where you can log in. Follow the prompts to complete authentication.

Next, set your Firebase project by running:

gcloud config set project <YOUR_PROJECT_ID>

Replace <YOUR_PROJECT_ID> with your Firebase project ID (e.g., aerokites-edu). You can find your project ID in the Firebase Console under "Project settings."

Verify the project is set correctly by running:

gcloud config get-value project

The output should display your project ID (e.g., aerokites-edu).

3Create the CORS Configuration File

Create a file named cors.json in a directory of your choice (e.g., your project directory). Add the following content to the file:

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

This configuration allows all origins (*) to make GET and HEAD requests to your Firebase Storage bucket, with a cache duration of 3600 seconds (1 hour).

🔧 Alternative Production Configuration

For production apps, you can restrict origins to specific domains:

                [
                    {
                        "origin": ["https://yourdomain.com", "https://www.yourdomain.com"],
                        "method": ["GET", "HEAD"],
                        "responseHeader": ["Content-Type", "Authorization"],
                        "maxAgeSeconds": 3600
                    }
                ]
                

4Apply CORS Configuration

Navigate to the directory where your cors.json file is located. Use the appropriate command for your operating system:

cd C:\Users\YourUsername\YourProjectFolder

Replace C:\Users\YourUsername\YourProjectFolder with the actual path to your project folder.

cd ~/YourProjectFolder

Replace ~/YourProjectFolder with the actual path to your project folder.

Then, apply the CORS configuration to your Firebase Storage bucket by running:

gsutil cors set cors.json gs://<YOUR_BUCKET_NAME>

Replace <YOUR_BUCKET_NAME> with your Firebase Storage bucket name (e.g., aerokites-edu.firebasestorage.app). You can find your bucket name in the Firebase Console under "Storage."

The command should output a confirmation message like: Setting CORS on gs://<YOUR_BUCKET_NAME>/....

5Verify the Configuration

Check if the CORS settings were applied successfully by running:

gsutil cors get gs://<YOUR_BUCKET_NAME>

Replace <YOUR_BUCKET_NAME> with your bucket name (e.g., aerokites-edu.firebasestorage.app). The output should display the content of the cors.json file, confirming that the settings were applied.

6Test Your App

Restart your Flutter web app to ensure it uses the updated Firebase Storage bucket settings.
Test image fetching (e.g., profile pictures) or other HTTP requests to verify that the CORS configuration is working correctly.
If the image still doesn't load, open your browser's developer tools (F12), go to the "Network" tab, and check the request for the image. Ensure the response includes the header Access-Control-Allow-Origin: *. If this header is missing, double-check the CORS settings or ensure your bucket name is correct.

Common Issues & Solutions

❌ "gsutil command not found" Error

Solution: Ensure Google Cloud CLI is properly installed and added to your system PATH. Restart your terminal after installation.

❌ "Permission denied" Error

Solution: Make sure you're authenticated with the correct Google account that has access to the Firebase project. Run gcloud auth login again.

❌ "Bucket not found" Error

Solution: Verify your bucket name in Firebase Console > Storage. The bucket name format is usually project-id.firebasestorage.app.

❌ Images still not loading after CORS setup

Solution: Clear browser cache, check browser console for CORS errors, and verify that the CORS configuration was applied successfully using gsutil cors get.

💡 Pro Tips:

Keep your cors.json file for future reference or modifications
For development, using "origin": ["*"] is fine, but consider restricting origins for production
If you change your domain, remember to update the CORS configuration
Test CORS configuration in incognito/private browsing mode to avoid cache issues