Flutter web can't load network image from another domain
Solution 1
For being able to display your images from any other Domain or from Firebase Storage on a Flutter web page you have to configure your data for CORS.
-
Open the GCP console, select your project and start a cloud terminal session by clicking the
>_
icon button in the top navbar. -
Click the open editor button (pencil icon), then create the
cors.json
file.
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 access.
- Run
gsutil cors set cors.json gs://your-bucket
If you need more information: https://cloud.google.com/storage/docs/configuring-cors
Solution 2
There are two ways to resolve this either run your app using HTML render or setup the CORS configuration.
1. Using HTML render
CORS is a mechanism that browsers use to control how one site accesses the resources of another site. It is designed such that, by default, one web-site is not allowed to make HTTP requests to another site using XHR or fetch. This prevents scripts on another site from acting on behalf of the user and from gaining access to another site’s resources without permission
When using <img>, <picture>, or <canvas>, the browser automatically blocks access to pixels when it knows that an image is coming from another site and the CORS policy disallows access to data.
Flutter has two renderers for web, canvaskit and html When you run/build app on the flutter web it uses renderers based on the device where its running.
HTML renderer: when the app is running in a mobile browser.
CanvasKit renderer: when the app is running in a desktop browser.
auto (default) - automatically chooses which renderer to use.
The HTML renderer can load cross-origin images without extra configuration. so you could use these commands to run and build the app.
flutter run -d chrome --web-renderer html // to run the app
flutter build web --web-renderer html --release // to generate a production build
source: https://docs.flutter.dev/development/tools/web-renderers
2. Setup CORS Configuration
- Download the Google-cloud-sdk which contains a tool called gsutil
- In your flutter project create a file called cors.json and add this json file which will remove all domain restrictions.
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
- Run
gcloud init
// located in google-cloud-sdk/bin - Authenticate yourself by clicking the link and choose the project in the console
- finally execute
gsutil cors set cors.json gs://<your-bucket-name>.appspot.com
You can find your bucket name in firebase storage.
Solution 3
i solve this issue by using html renderer
flutter build web --release --web-renderer html
or
flutter run --web-renderer html
Solution 4
for me flutter run -d chrome --web-renderer html
worked.
Solution 5
If you use firebase storage just follow these steps:
- Open Google Cloud Console at your project
- Click on console icon in top right corner
- Click Open editor
- Click File->New->cors.json
- Place code below
[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ]
- Then Run in console
**
gsutil cors set cors.json gs://bucket-name
**
bucket-name is the name of the storage bucket which you can find on your firebase project above the folders in the storage section
Abel Ayalew
Electrical Engineering Student @AASTU and computer enthusiast!
Updated on February 13, 2022Comments
-
Abel Ayalew about 2 years
I can't load network images in flutter web from other domains with API calls. getting this error
Trying to load an image from another domain? Find answers at: https://flutter.dev/docs/development/platform-integration/web-images ImageCodecException: Failed to load network image.
any help?
-
Abel Ayalew about 3 yearsit works for both deployment and debuging
-
theSpuka about 3 yearsOn Step 2, in order to create the cors.json file, click on the 3 dots (...) on the same row as Explorer:XXXX OR just click on File>new file. Step 3: You'll find "your-bucket" in your firebase STORAGE console and YOU WILL HAVE TO AUTHORIZE when you run the shell command.
-
Muthu S almost 3 yearsnot loading for google places API for flutter web
-
Lenin Zapata almost 3 yearsThis command is executed every time a change is copied in Flutter ?, this command works but when re-executing the changes no longer work
-
Liel van der Hoeven almost 3 yearsTo verify:
gsutil cors get gs://your-bucket
-
Abdulmalek Dery almost 3 yearsit will make the image and text density so bad...please don't use that type of rendering
-
James 666 almost 3 yearsThanks Jens and Spuka, that really saved me - don't know where the hell you got that solution from
-
Raghu Mudem over 2 yearsStill not working after the all above suggestions, Trying to display YouTube thumbnails in my flutter web app. Am I missing something after point 3. Is there any reload or refresh command need to perform. Please suggest me.
-
Raghu Mudem over 2 years@MuthuS did you find the solution?
-
Muthu S over 2 yearsNo, unfortunately no solutions were worked in my case. Luckily its my internal project, so i used to enable CORS plug-in for users browsers to make it work.
-
kishan vekariya over 2 yearsi want to add fit property like image widget, any idea how to add that ?
-
Omatt over 2 yearsThe arguments work when deployed. You just need to add the same arguments during build
flutter build web --web-renderer html
-
sh_ark over 2 yearsThis looks like configuration only related to firebase and google cloud. Is there any additional configuration involved in flutter app as well? As images are still not loading and throws missing CORS headers error.
-
sh_ark over 2 yearsOkay, so it's working for me, I was running in localhost and also using origin as
"https://firebasestorage.googleapis.com/v0/b/my_app_name.appspot.com"
, which on changing to"*"
starts working. But how to correctly use cutom origin instead of"*"
? -
nipunasudha over 2 years@sh_ark use
https://my_app_name.we.app
this is the domain the request is coming from -
Priyshrm over 2 yearsThis is a great answer. Worked like a charm in my flutter project. Why does it not have more upvotes? Am I missing anything?
-
Franz over 2 yearsThat worked for me. Thank you :)
-
santosh adhikari over 2 yearsDid not work in my case
-
Ali Azimoshan over 2 yearsfor people like me who don't know anything about buckets and get 403 errors, you get your bucket List with
gsutil ls
, and check which one is used for your app and set cors.json for that one. -
oga over 2 yearsVery good to have this at a glance. Thank you.
-
Yves Boutellier about 2 yearswhere in your file tree do you place the
cors.json
file? (does it matter?) -
Mahesh Jamdade about 2 years
cors.json
doesn't really matter once you run thegsutil
command. -
Hassan Hammad about 2 yearsthank you so much. Wouldnt have figured this out in a million years lol
-
Leonardo Rignanese about 2 yearsTo verify: 'gsutil cors get gs://your-bucket'
-
Hamza about 2 yearsAs simple as that, what a solution 2!!
-
Inder Pal Singh almost 2 years@MaheshJamdade cors.json file is actually required for gsutil to read our cors configuration.Also Cors.json file should be placed in path where you'll run G-Cloud command
-
most200 almost 2 yearsAdding cors.json in the web folder does not work by itself. You have to follow the instructions in other answers to apply the file to your storage bucket using gsutil. And it does not have to be in the web folder, it can be saved anywhere.
-
Noobdeveloper almost 2 yearswhat is maxageseconds in this code
-
Sadam Khan almost 2 yearsthank you. One of the simplest solutions and it worked for me. Just had to save, hot reload, and reload the web page. Thanks
-
Ali Murtaza almost 2 yearsIt worked! In my case, I re-run the web app and it showed the image