Flutter firebase storage CORS issue

Question

I'm using a free plan of firebase storage. All working good but the image not loading on my flutter web.

I'm getting this error.

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/sap-app-8318e.appspot.com/o/cover%2Fimage_cropper_028D7F16-0161-4E90-B40D-EE47D310F322-5339-000003697F67306C.jpg?alt=media&token=313475a9-9728-4e61-97da-f5d5534bb008' from origin 'https://sap.nextcardpro.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
firebasestorage.googleapis.com/v0/b/sap-app-8318e.appspot.com/o/cover%2Fimage_cropper_028D7F16-0161-4E90-B40D-EE47D310F322-5339-000003697F67306C.jpg?alt=media&token=313475a9-9728-4e61-97da-f5d5534bb008:1

I searched on google everyone told need to allow CORS Access from firebase, but how can I have to add it. but how can I add it to my free firebase plan?

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

score 38 · Accepted Answer · answered Jan 23 '21 at 19:40

38

Finally, solve by this post after 2 days of google search.

https://bitmovin.com/docs/encoding/faqs/how-do-i-set-up-cors-for-my-google-cloud-storage-bucket

answered Jan 23 '21 at 19:40

Feroz Ahmed

931
10
16

3

Bravo! you saved my life. Thanks ! – Kabuki Mar 01 '21 at 19:32
in my case i got does not have storage.buckets.get access to the Google Cloud Storage bucket. with email account and service account... any solution for this. – Saif Ur Rehman Saif Jul 07 '21 at 11:20
1

Thank you for good infomation! Arigatogozaimasu! – takinok Jul 09 '21 at 04:18
precise answer, thank you! – MBK Sep 25 '21 at 11:55
and you ended my struggles, even chatGPT couldn't help lol, after about 7 hours chatting with it – public static void Main Apr 02 '23 at 16:16
For the lazy, another answerer puts the contents of this no-longer-existing page here: https://stackoverflow.com/a/67975184. – Gigi Bayte 2 Jun 06 '23 at 06:52

Hashem Aboonajmi · Answer 2 · 2021-11-09T15:14:10.943

Answer from above link:

If you already familiar with Google Cloud Services and Tools, like gcloud and/or gsutil, you can also checkout Google's documentation about CORS.

Login to your google cloud console: https://console.cloud.google.com/home. Click on "Activate Google Cloud Shell" in the upper right corner (see picture below):

At the bottom of your window, a shell terminal will be shown, where gcloud and gsutil are already available. Execute the command shown below. It creates a json-file which is needed to setup the cors-configuration for your bucket. This configuration will allow every domain to access your bucket using XHR-Requests in the browser: echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

If you want to restrict the access one or more specific domains, add their URL to the array, e.g.: echo '[{"origin": ["https://yourdomain.com", "http://localhost:*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json (localhost is also added to access resources while developing, based on your needs).

Replace YOUR_BUCKET_NAME with your actual bucket name in the following command to update the cors-settings from your bucket gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME

To check if everything worked as expected, you can get the cors-settings of a bucket with the following command: gsutil cors get gs://YOUR_BUCKET_NAME

You can find the bucket ID in the Storage panel of your project's Firebase Console:

Storage Panel of the Firebase Console It's the value starting with gs://.

score 6 · Answer 3 · answered Aug 20 '22 at 08:19

I had a similar problem and as always, it took me few hours to fix but the solution is as always simple and easy.

When you run this command flutter run -d chrome --web-renderer canvaskit --no-sound-null-safety app will run and everything works fine and pixel-perfect but sadly network images failed to load. When you inspect the app look into console you will see this beautiful error

(Blocked by CORS policy) : No ‘Access-Control: Allow-Origin’ header is present on the requested resource.

What is CORS?

CORS stands for (Cross-Origin-Resource-Sharing). CORS is a browser security feature that restricts Cross-origin HTTP requests that are initiated from scripts running in the browser.

Now how to fix CORS issue? And displaying images from any other domain or from Firebase Storage. The answer is very simple follow me with the steps below

Open the GCP console you will see the screen below

Now select your project and click on the dashboard Button.

Start a cloud terminal by clicking the >_ icon button in the top navbar as you can see in the below image

Click on the open editor button and (wait for few seconds)

Now click on 3 (...) dot and create new file and named it cors.json like you can see in the below image

Copy and paste the this code

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

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

Now run the command : gsutil cors set cors.json gs://your-bucket When you run gsutil cors set cors.json gs://your-bucket you will get beautiful error (‘gsutil ServiceException: 401 Anonymous caller does not have storage.objects.list access to bucket’) it’s mean you need to login first.
Run this command gcloud auth login and login into gcloud
Now again run this command gsutil cors set cors.json gs://your-bucket

if you want to read more about CORS: https://cloud.google.com/storage/docs/configuring-cors

score 1 · Answer 4 · answered Dec 04 '21 at 04:30

1

If somebody has a problem with installing gsutil. It will not work with python 3.10 which is the most recent one. You have to install a previous one, which version number starts with 3.7

like this one: download python 3.7.9

answered Dec 04 '21 at 04:30

bogyayb

11
2

score 1 · Answer 5 · answered Apr 22 '22 at 04:38

1

Official Firebase Storage answer can be found here. May be useful if the answer ever changes. As of April 2022, it's basically the same as Feroz's answer.

answered Apr 22 '22 at 04:38

Jesse Pangburn

655
1
7
16

Flutter firebase storage CORS issue

5 Answers5

Linked