Using Firebase Storage on Flutter Web

My app was working fine on Android, iOS and MacOS, but it wouldn't display images stored in Firebase Storage. It would fail with the dreaded CORS error.

I need to somehow whitelist localhost:5000 for Firebase Storage. It is well documented at https://firebase.google.com/docs/storage/web/download-files#cors_configuration. It's just extra work.

First I needed to install gsutil ( https://cloud.google.com/storage/docs/gsutil_install) and sign in with gcloud init.

Next, I create my cors.json file.

[
  {
    "origin": ["localhost:5000", "[production domain]"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Finally I apply the settings:

% gsutil cors set cors.json gs://[project-id]
Setting CORS on gs://[project-id]/...
NotFoundException: 404 The specified bucket does not exist.

% gsutil cors set cors.json gs://[project-id].appspot.com
Setting CORS on gs://[project-id].appspot.com/...

But I still got the same error.

So instead I tried to temporarily whitelist everything: "origin": "*". And it worked: my app displayed the image from Firebase Storage! So it looks like it is not enough to specify the domain, I need to specify whether it's http or https:

[
  {
    "origin": ["http://localhost:5000", "https://[production domain]"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

And indeed, it worked with this more restrictive setting.