0

I have a flutter web app that I am trying to access images stored in firebase storage. When I try to get to the image I get this error:

Access to XMLHttpRequest at 'link-adress' from origin 'https://myDomain.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

After that I edited my code to add:

    allow origin: if ["https://myDomain.app/*"];
    allow method: if ["GET"];
    allow headers: if[
        "Authorization",
        "Content-Type",
        "x-firebase-storage-token",
        "x-firebase-storage-download-token"
      ];

What is super odd is that the images download and work if I visit my site on Chrome or Firefox from my mobile phone, but if I try from desktop Chrome, Safari etc. I get the cors error still.

Ten Digit Grid
  • 1,315
  • 4
  • 22
  • 43

1 Answers1

3

This is a known issue with Firebase Storage and desktop browsers where a Flutter app is rendering with CanvasKit. You may find some suggestions to switch your Flutter rendering to HTML, but a better solution is to enable CORS in your Firebase Storage.

Please see the answer by Jens Becker on this post: Flutter web can't load network image from another domain

I followed Jens' instructions and they resolved the issue for me.

Full answer:

--

For being able to display your images from Firebase Storage on a Flutter web page you have to configure your data for CORS.

  1. Open the GCP console, select your project and start a cloud terminal session by clicking the >_ icon button in the top navbar.
  2. Click the open editor button (pencil icon), then create the cors.json file.
  3. Run gsutil cors set cors.json gs://your-bucket

The cors.json file should look like this:

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

I set the origin to * which means that every website can display your images. But you can also insert the domain of your website there to restrict the access.

most200
  • 874
  • 1
  • 8
  • 9