Flutter: CORS blocked getting images from another wp site

Question

My flutter app works well on android and iOS. Now I am trying to publish my app also on web (Domain: webapp.ockenheim.de).

But every GET Request of data from https://app.ockenheim.de was blocked by CORS.

Then I added header( "Access-Control-Allow-Origin: https://webapp.ockennheim.de" ); to function.php of my template.

I also tried adding

header( "Access-Control-Allow-Origin: *" );

Now I can make CORS requests to custom REST API endpoints. Only the "Network Image" requests of Flutter App are blocked now:

Cross-Origin request blocked: The same origin rule block reading https://app.ockenheim.de/wp-content/uploads/2022/12/Screenshot_20221202_121659-1.jpg. (reason: CORS-header 'Access-Control-Allow-Origin' is missing). Statuscode: 200.

The code which loads the image from flutter:

Container(
              constraints: const BoxConstraints(
                maxHeight: double.infinity,
                maxWidth: double.infinity,
              ),
              width: 10000,
              //height: double.infinity,
              margin: const EdgeInsets.fromLTRB(0, 0, 0, 0),
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
              //height: 170,
              decoration: BoxDecoration(
                  image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(cardModell.bild),
              )),

Does someone have a clue, how to solve this issue?

You need to get your webserver to provide the CORS headers when responding to image requests. You can't do that from php as it doesn't serve those, it'll be a webserver config thing — ADyson, Dec 06 '22 at 22:12
Does this answer your question? [How does the 'Access-Control-Allow-Origin' header work?](https://stackoverflow.com/questions/10636611/how-does-the-access-control-allow-origin-header-work) — Mehdi, Dec 07 '22 at 06:13
@ADyson Is there a way of dealing with it by .htaccess? I do not have access to config the server (plesk). — Christian, Dec 11 '22 at 23:03
I'd expect one of [these](https://stackoverflow.com/questions/14467673/enable-cors-in-htaccess) might work (except the PHP-based one). Or there are more results [here](https://www.google.com/search?q=htaccess+add+cors+headers+to+images) — ADyson, Dec 12 '22 at 00:46

score -1 · Answer 1 · answered Jan 13 '23 at 14:32

had the same problem a while ago.

When you declaring your your URL to the endpoint don't use like this:

Uri request =
    Uri(scheme: 'https', host: 'endpoint.com', path: '/api/path');

Instead use like this:

  http.Response response =
      await http.get(Uri.parse("https://completeurlwhitpath.com/api/path"));

Hope this helps you, didn't needed any configuration of CORS or anything on my end, only this change solves the problem for Flutter Web.

Flutter: CORS blocked getting images from another wp site

1 Answers1