Flutter web can't load network image from another domain

Question

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?

Try to read the documentation here: https://flutter.dev/docs/development/platform-integration/web-images#cross-origin-images — ddalbosco, Jan 10 '21 at 16:27
try using this package "image_network 2.5.1" this will work fine on every platform — Aqeel Mughal, Oct 18 '22 at 07:00

score 125 · Answer 1 · edited Feb 22 '23 at 10:21

125

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

edited Feb 22 '23 at 10:21

Tomerikoo

18,379
16
47
61

answered Feb 08 '21 at 15:30

Jens Becker

1,471
1
7
11

14

On 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. – theSpuka Feb 21 '21 at 21:34
9

To verify: `gsutil cors get gs://your-bucket` – Liel van der Hoeven Jul 05 '21 at 22:31
3

Still 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 Aug 03 '21 at 12:06
This 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 Oct 07 '21 at 06:09
Okay, 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 ```"*"```? – sh_ark Oct 07 '21 at 07:35
@sh_ark use `https://my_app_name.we.app` this is the domain the request is coming from – nipunasudha Oct 23 '21 at 07:40
3

for 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. – Ali Azimoshan Dec 16 '21 at 06:32
what is maxageseconds in this code – Noobdeveloper Jun 08 '22 at 15:31
I needed to use the next command in order to make it work: *gsutil cors set cors.json gs://your-bucket* – Roberto Juárez Jul 28 '22 at 02:27
https://stackoverflow.com/questions/71193348/firebase-storage-access-to-fetch-at-has-been-blocked-by-cors-policy-no-ac/71193349#71193349 all step by step is here – Sumit Mar 26 '23 at 09:43

Mahesh Jamdade · Answer 2 · 2023-07-26T20:35:27.087

There are two ways to resolve this either run your app using HTML renderer or set up the CORS configuration.

1. Using HTML renderer

Taken from the docs

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 content, which will remove all domain restrictions. (It doesn't matter where this file is located)

[
  {
    "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.

I have documented this entire process in github gists

where in your file tree do you place the `cors.json` file? (does it matter?) — Yves Boutellier, Feb 09 '22 at 15:07
`cors.json` doesn't really matter once you run the `gsutil` command. — Mahesh Jamdade, Feb 09 '22 at 15:13
@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 — Inder Pal Singh, Jun 01 '22 at 04:20
@InderPalSingh we no longer need the `cors.json` file once we upload the configuration by running the last command. — Mahesh Jamdade, Jul 08 '22 at 16:35
I too recommend the 2nd solution... but what happens when we cant set this on a domain/server that doesnt give us permission to do so? How do we handle CORS then? — user3833732, Aug 14 '22 at 07:24
Thanks. I get an error on the last step (for solution 2): CommandException: "cors" command spanning providers not allowed. - any idea how to fix? — Kdon, Nov 06 '22 at 09:26
@MaheshJamdade yes had the file but realized I needed to run in the command from the project directory. Working now, thanks. — Kdon, Nov 09 '22 at 02:34

score 51 · Answer 3 · edited Feb 22 '23 at 10:23

51

I solved this issue by using html renderer:

flutter build web --release --web-renderer html

or

flutter run --web-renderer html

edited Feb 22 '23 at 10:23

Tomerikoo

18,379
16
47
61

answered Jan 13 '21 at 06:37

Abel Ayalew

1,603
1
7
12

it works for both deployment and debuging – Abel Ayalew Feb 11 '21 at 06:17
not loading for google places API for flutter web – IamVariable Jun 17 '21 at 14:48
4

it will make the image and text density so bad...please don't use that type of rendering – Abdulmalek Dery Jul 07 '21 at 12:13

score 29 · Answer 4 · edited Feb 22 '23 at 10:27

29

For me this worked:

flutter run -d chrome --web-renderer html

edited Feb 22 '23 at 10:27

Tomerikoo

18,379
16
47
61

answered Mar 04 '21 at 19:41

Michael Uhlenberg

420
4
8

2

The arguments work when deployed. You just need to add the same arguments during build `flutter build web --web-renderer html` – Omatt Sep 11 '21 at 15:46
@Omatt https://stackoverflow.com/questions/76411880/how-to-give-build-arguments-to-firebase-hosting/76413900#76413900 – Rehan Jun 06 '23 at 15:31

score 27 · Answer 5 · edited Feb 22 '23 at 10:25

27

Simply add this in your Flutter (web/index.html):

<script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>

edited Feb 22 '23 at 10:25

Tomerikoo

18,379
16
47
61

answered Feb 12 '22 at 23:27

Ehab Reda

555
5
9

The side effect of this approach is that the web version (at least for me) stopped rendering the Google font in the project :/ (as of Flutter 3.3.5) – Dana Oct 27 '22 at 22:34
But Lottie Animation not works If I use this Renderer – Balaji Jan 19 '23 at 14:45

score 21 · Answer 6 · edited Feb 22 '23 at 10:44

21

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.

edited Feb 22 '23 at 10:44

Tomerikoo

18,379
16
47
61

answered Jul 01 '21 at 09:04

F-Y

399
5
14

To verify: 'gsutil cors get gs://your-bucket' – Leonardo Rignanese Apr 13 '22 at 14:47

score 11 · Answer 7 · answered Sep 11 '21 at 06:18

11

To debug quickly, instead of flutter run -d chrome --web-renderer html running from the terminal you can also add the arguments --web-renderer html on your run config. On the menu bar, navigate through Run > Edit Configurations

answered Sep 11 '21 at 06:18

Omatt

8,564
2
42
144

Adelina · Answer 8 · 2021-04-23T19:49:22.573

If you can't update CORS settings or add proxy, prefer CanvasKit (has better performance) over HTML renderer - could display image with platform view:

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MyImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    String imageUrl = "image_url";
    // https://github.com/flutter/flutter/issues/41563
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
      (int _) => ImageElement()..src = imageUrl,
    );
    return HtmlElementView(
      viewType: imageUrl,
    );
  }
}

i want to add fit property like image widget, any idea how to add that ? — kishan vekariya, Sep 09 '21 at 04:37

score 5 · Answer 9 · answered Dec 13 '22 at 21:35

5

The Ultimate Solution

Use this package instead of flutter's NetworkImage.

https://pub.dev/packages/image_network

Tested on Flutter web with Canvas renderer and it works like a charm!

answered Dec 13 '22 at 21:35

kageeker

447
1
5
11

This should be the accepted answer – Joran Aug 18 '23 at 06:32

score 3 · Answer 10 · edited Feb 22 '23 at 10:34

3

Running

flutter run --web-renderer html

solved my issue.

edited Feb 22 '23 at 10:34

Tomerikoo

18,379
16
47
61

answered Feb 24 '21 at 14:18

carlosx2

1,672
16
23

This command is executed every time a change is copied in Flutter ?, this command works but when re-executing the changes no longer work – Lenin Zapata Jun 22 '21 at 21:08

Ali Ali El-Dabaa · Answer 11 · 2022-02-25T07:24:31.010

This official solution worked for me on Chrome only (Source). But I had to run it first every time.

flutter run -d chrome --web-renderer html

And disabling web security also worked (Source). But the browsers will show a warning banner.

But In case you are running on a different browser than Chrome (e.g. Edge) and you want to keep 'web security' enabled. You can change the default web renderer in settings in VS Code

File ==> Preferences ==> Settings ==> Enter 'Flutter Web' in the Search Bar ==> Set the default web renderer to html

score 1 · Answer 12 · answered Aug 07 '21 at 17:23

1

For someone who uses Slim Framework, just create a .htaccess file on that folder for storing images and put this line of code

Header set Access-Control-Allow-Origin *

answered Aug 07 '21 at 17:23

NM Naufaldo

1,032
1
12
30

score 1 · Answer 13 · edited Feb 22 '23 at 10:42

I had an issue while loading content from other domains which I don't have control over to change the CORS settings from the server-side. I have found a work-around for this problem:

Go to C:\src\flutter\packages\flutter_tools\lib\src\web or navigate from your Flutter root directory to flutter\packages\flutter_tools\lib\src\web.
Open chrome.dart in your text editor.
Add '--disable-web-security' under the like '--disable-extensions' and save the file.
Run flutter clean in your project folder and run the app.

Adding this flag might also cause some security issues.

score 0 · Answer 14 · answered May 31 '23 at 10:00

This issue will occur by CROS policy. and There is two case to handle this:

For Debug
For Live Web App

For Debugging I suggest just disable the web Security to Pass through CROS. or use flutter_cors package. This package only work for debugging.

For Publishing, I suggest use Proxy server to handle the CORS issue.It is a best way to Bypass CORS. Or You can try some other methods -Link Here

galki · Answer 15 · 2023-07-10T10:44:20.473

This answer includes the two main ones mentioned as well as a vital point that wasn't:

LAUNCH CONFIGURATION

Select and open your launch config:

Note the args value:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter (lib\\main.dart)",
      "type": "dart",
      "request": "launch",
      "program": "lib\\main.dart",
      "flutterMode": "profile",
      "args": ["-d", "chrome", "--web-renderer", "html"]
    }
  ]
}

Make sure you're running the same config:

Now you can run the app as usual.

CORS

Install gsutil and create a file cors.json with content:

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

Run gsutil cors set cors.json gs://[YOUR BUCKET]. If you later want to clear this config from your bucket change the content to [] and run again.

ADD TOKEN TO NetworkImage WIDGET

This is what made it work for my rules that required authentication, as I have removed the token param from the image url. Get the user auth token (FirebaseAuth.instance.currentUser.getIdToken()) and add it to the headers arg like so:

NetworkImage(imageUrl, headers: {
  'Authorization': 'Bearer $token',
})

Not sure what your particular situation is with "another domain" but I hope this is relevant.

score -1 · Answer 16 · edited Feb 22 '23 at 10:41

There are two ways to solve this issue:

Just run your flutter web with
```
flutter run -d chrome --web-renderer html
```
But there is one problem when you render your canvas view to HTML view. All your views like images, text, etc. will come out blurry (bad quality). If you can sacrifice the quality, go on with the first solution.

If you don't want to sacrifice quality, you need to add some code to your backend site. I have done with NodeJS, you can use with yours:

var express = require("express")
var app = express()

var subsriberRecord = require("./controller/Subscribe")
var blogRecord = require("./controller/BlogContent")

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers",
     "Origin, X-Requested-With, Content-Type, Accept"
     );
    next();
  });

app.use("/record/", subsriberRecord);
app.use("/record/", blogRecord);
app.use('/uploads', express.static('./uploads'));

app.listen(5000, () => {
    console.log("Server running at port 5000");
})

Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. — Adriaan, Feb 22 '23 at 10:20

Flutter web can't load network image from another domain

16 Answers16

1. Using HTML renderer

2. Setup CORS Configuration

Linked

Related