access-control-allow-origin is not allowed error , but if omitted then is expected from get request Flutter web

Question

I'm getting my get requests blocked by CORS policy when downloading an image from a url with the code:

await get(product.imageUrl).then((img) async {
          print('image downloaded');
          var dwnldProd = product;
          dwnldProd.productImage = img.bodyBytes;
          await _productRepository.saveProduct(dwnldProd);
        }).catchError((e) {
          print('downloading product image error: $e');
        });

As the No 'Access-Control-Allow-Origin' header is present on the requested resource. says my request was missing the headers so I added them as :

await get(product.imageUrl, headers: <String,String>{
          'Access-Control-Allow-Origin': '*', // Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
//        'Access-Control-Allow-Origin':'http://localhost:5000/', // Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

          "Access-Control-Allow-Methods": "GET, POST, OPTIONS, PUT, PATCH, DELETE",
          "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

        }).then((img) async {
          print('image downloaded');
          var dwnldProd = product;
          dwnldProd.productImage = img.bodyBytes;
          await _productRepository.saveProduct(dwnldProd);
        }).catchError((e) {
          print('downloading product image error: $e');
        });

but now the error is access-control-allow-origin is not allowed.

I tried so many parameters combinations from various accepted answers here on SO but none is working in my case. Can you spot what's wrong in my headers? Worth to mention I'm running the web app on Chrome in release mode with the command flutter run -d chrome --release --web-hostname localhost --web-port 5000.

Thank you very much for the help.

UPDATE

I've notice this and I don't understand it:

If I supply access-control-allow-origin in the request header I get the error field access-control-allow-origin is not allowed:

but if I comment it out then the error is No 'access-control-allow-origin' header is present on the requested resource:

As the resource is a file on firebase storage, am I supposed to create this not found header on the resource when I upload the image? If so how to? In the metadata perhaps?

Answer 1

Finally found where the problem was. Indeed I was mislead by reading the errors. While the field x is no allowed in headers was pretty clear, I was misreading the No 'access-control-allow-origin' header is present on the requested resource. and thought that my request was missing headers.. so when finally read correctly that on requested resources I realized I hadn't done something on the Storage bucket: I had to setup CORS for my Google Storage bucket.. So following the instructions in the docs using gustily was pretty straightforward.

1. I created a google_storage_cors.json file with flutter which contains:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "responseHeader": ["Access-Control-Allow-Origin"],
    "maxAgeSeconds": 3600
  }
]

where ["*"] is gonna be changed for your domain, for local host deployment it's just perfect.. [] are needed fo all except maxAgeSeconds..

1. with gsutil cors set [filepath] [your bucket] upload it to Google Storage
2. with gut get [your bucket] check it's been uploaded.
3. enjoy the downloading freedom.

One particular thanks to whom gave a -1. It's always a pleasure to see helpful people. Cheers.

Hope this helps who's dealing with this for the first time and struggles quite a bit in understanding the errors and find a solution.