Step-by-Step Instructions to Enable CORS Using gsutil

Step 1: Install Google Cloud SDK

1. Download and Install the Google Cloud SDK:
   • Follow the instructions for your operating system on the Google Cloud SDK installation guide.

Step 2: Initialize the SDK and Authenticate

1. Initialize the SDK and Authenticate (Optional):

   • Open a terminal or command prompt.
   • Initialize the SDK:

     gcloud init
     

   • Follow the prompts to authenticate with your Google account and set up your project.

2. Authenticate with Google Cloud:

   gcloud auth login
   

Step 3: Create the CORS Configuration File

1. Create a CORS Configuration File in Flutter project:
   • Create a JSON file named cors.json with the following content:

     [
       {
         "origin": ["http://localhost:*"],
         "method": ["GET", "POST", "PUT"],
         "maxAgeSeconds": 3600,
         "responseHeader": ["Content-Type"]
       }
     ]
     

   • This configuration allows requests from any localhost origin (with any port), and methods GET, POST, and PUT.

Step 4: Apply the CORS Configuration to Your Bucket

1. Apply the CORS Configuration Using gsutil:
   • Use the gsutil cors set command to apply the CORS configuration to your Firebase Storage bucket.
   • Replace your-bucket-name with the name of your Firebase Storage bucket.

     gsutil cors set cors.json gs://your-bucket-name
     

How to Find your-bucket-name Using Firebase Console

1. Open Firebase Console:

2. Go to the Firebase Console.

3. Select Your Project:

   • Click on the project for which you want to find the bucket address.

4. Navigate to Storage:

   • In the left-hand menu, click on "Storage".

5. View Bucket Details:

   • You will see the default bucket listed at the top of the Storage page. The bucket address is typically in the format your-project-id.appspot.com.