Setup - Configure CORS (Android & Web)

Step 8: Configure CORS for Firebase Storage

Note: CORS (Cross-Origin Resource Sharing) is required in Flutter Web to allow secure access to Firebase Storage files like profile pictures and attachments. 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.

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.

A. Install 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).

B. Authenticate 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).

C. Create 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).

D. Apply CORS Configuration

Navigate to the directory where your cors.json file is located. For example, if the file is in C:\Users\YourUsername\YourProjectFolder, run:

cd C:\Users\YourUsername\YourProjectFolder

Replace C:\Users\YourUsername\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>/....

E. Verify 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.

F. Test 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.