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
    }
]

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.