Display images stored on Firebase Storage from Flutter Web

Question

I am unable to retrieve images stored on Firebase storage on Flutter Web.

Accompanied by:

Access to XMLHttpRequest at <firebase-storage-photo-url> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

According to Google Cloud Docs

Cross Origin Resource Sharing (CORS) allows interactions between resources from different origins, something that is normally prohibited in order to prevent malicious behavior.

Following the firebase docs, here is how to solve this:

1. Download gsutil, a Google Cloud CLI, instructions on how to install can be found here.
2. Create cors.json file with the following content:

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

3. Now use the CLI to deploy cors.json rules using this command:

    gsutil cors set cors.json gs://<your-cloud-storage-bucket>

You can find the path for your Firebase storage bucket in Firebase console under Storage feature.