Modify CORS Policy for Firebase Storage Bucket

To allow Flutter Web Apps to access Firebase Storage Data using GET method, we need to edit the Cross-origin resource sharing (CORS) policy in the Google Cloud Platform (GCP) for a particular Firebase Project (Firebase Storage Bucket)

STEP 1: Login to Google Cloud Platform (Login with same Google account which is linked to your Firebase Project) & click on “Console

STEP 2: Select your Firebase Project ID & click on “Editor/Terminal Icon

STEP 3: Click on Open Editor to Activate Google Cloud Shell.

STEP 4: In your Comupter create a file named “cors.json” & paste the following content inside it exactly as it is:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Save the file & keep it ready for the next step

STEP 5: Once Google Cloud Shell Editor is opened, click on Upload to select the cors.json file from your computer to upload it.

STEP 6: On a new tab, Login to Firebase Dashboard > Select Project > Firebase Dashboard > Storage > Copy the Firebase Storage Bucket URL as shown below

STEP 7: Head back to Google Cloud Shell Editor , click on “New Terminal” & paste the following command in the terminal & hit enter:

gsutil cors set cors.json Paste your Firebase Storage Bucket URL here

STEP 8: On Successful setup, you will see a message like this without any error:

👏 Congratulations! You have successfully set up the CORS Policy for your Firebase Storage Bucket. Web App can now access/download storage files without any REQUEST error.

Powered by BetterDocs