Flutter Web blocked by CORS policy only affects desktop browsers and not Mobile Browsers

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.

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:
https://stackoverflow.com/questions/65653801/flutter-web-cant-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.