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.

Improve this question
0

1 Answer 1

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This worked fantastic, I appreciate the explanation as well!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.