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?

score 9 · Accepted Answer · answered Jul 14 '20 at 17:28

9

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.

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..

with gsutil cors set [filepath] [your bucket] upload it to Google Storage
with gut get [your bucket] check it's been uploaded.
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.

answered Jul 14 '20 at 17:28

Vincenzo

5,304
5
38
96

1

Can you please elaborate on how you created the cors file with flutter? On your local machine, did you just place the cors JSON file in your build/web folder and type "flutter deploy"? Kindly correct me if I misunderstood. – Zujaj Misbah Khan Dec 30 '21 at 14:42
Hi, I used gsutil, you can find it here https://cloud.google.com/storage/docs/gsutil, then check this firebase guide https://cloud.google.com/storage/docs/configuring-cors#gsutil It's pretty straightforward In my answer step 2 you find the command to upload the `google_storage_cors.json` created in step 1, and step 3 is the command to check if it uploaded correctly. hope it helped – Vincenzo Dec 31 '21 at 14:34
@Vicenzo I followed the steps from here https://stackoverflow.com/a/58613527/4517075 but still no luck. – Zujaj Misbah Khan Dec 31 '21 at 17:37
Make sure you read the docs. Also the accepted answer is pretty complete, have you tried it? – Vincenzo Dec 31 '21 at 17:54
Of course, why would I be complaining without trying! – Zujaj Misbah Khan Dec 31 '21 at 18:44
@Vicenzo I am using Spark Plan, do I need to change it? – Zujaj Misbah Khan Jan 01 '22 at 03:51
As your link pointed to another answer I thought you were trying that. .. and no. Spark plane is fine – Vincenzo Jan 01 '22 at 09:12
Have you downloaded gsutil? – Vincenzo Jan 01 '22 at 09:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240632/discussion-between-zujaj-misbah-khan-and-vincenzo). – Zujaj Misbah Khan Jan 01 '22 at 15:17

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

UPDATE

1 Answers1