Images not loading in codelab app. CORS error is thrown.

[spetz83]

Browser: Chrome Browser version: 88.0.4324.146 Operating system: Windows 10 Pro Operating system version: 19042.789

What steps will reproduce the problem:

1. Follow the codelab verbatim to step 9 and run the app.

What is the expected result? App should run and display cards with pictures for each restaurant.

What happens instead of that? App loads and cards are displayed, but pictures do not load. Console reports CORS errors.

Please provide any other information below, and attach a screenshot if possible.

Example Error Message: Access to XMLHttpRequest at 'https://storage.googleapis.com/firestorequickstarts.appspot.com/food_11.png' from origin 'http://localhost:60020' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[ditman]

Oh, Flutter recently changed its web renderer to "auto" from "html", and in desktop browsers "auto" prefers "canvaskit". In canvaskit, "network" images from a domain different to the one your website is hosted on (cross-origin) require CORS setup.

A quick way for this to be circumvented so you can keep going with the codelab is to use the html renderer. Please try:

flutter run -d chrome --web-renderer html

More info:

• Flutter Web renderers
• Cross-Origin Resource Sharing (CORS)

I'll keep this open so we can revisit the instructions and make a note of that small change. Thanks for reporting the issue!

PS: Same thing a bunch of steps down, when building for web: flutter build web --web-renderer html needs to be added to the build command!

[gOzaru]

Still failed to load Network Image. I have defined CORS.json as described in this website. This is my config gor CORS.json (link)

The error lines: Failed to load network image. Image URL: https://storage.googleapis.com/firestorequickstarts.appspot.com/food_8.png Trying to load an image from another domain? Find answers at: https://flutter.dev/docs/development/platform-integration/web-images

[ditman]

@gOzaru that should be the way to go. From what I see from your links, the image still is not being returned with the correct CORS headers.

You can verify this by looking at the "Response Headers" section of the Network panel for the request:

Or (maybe more straightforward), just attempting to fetch the image in the JS console:

Once the images start to come back with the correct Access-Control-Allow-Origin header, images will be fine.

---

@gOzaru reading further here: https://cloud.google.com/storage/docs/cross-origin#cors-elements, it doesn't seem that you need to add Access-Control-Allow-Origin as the responseHeader of your JSON, I'd try leaving it blank:

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

(Also, I'm not sure if * is an allowed origin, you might need to be more specific)

---

Here's some Troubleshooting tips, it doesn't seem like * is a valid origin. I've seen examples with Access-Control-Allow-Origin in the responseHeader as yours.

[gOzaru]

I followed your suggestion and it seems that tutorial's images are in cloud storage where the access to there is denied. This is the url I use in origin: https://storage.googleapis.com/firestorequickstarts.appspot.com/

I have been doing trial and error for this tutorial since yesterday and all comes to this conclusion: The tutorial is not made for social learning purpose as they don't teach us how to fetch images from their cloud storage. They FORGOT THAT. This tutorial is made for themselves. This is wasting my time. I am gonna seek another tutorial. Thank you for your quick support, but this is useless. They should make tutorial about how to fetch images from our own cloud storage where the images must be uploaded there, not from their cloud storage which is denied. This logic of thinking is wrong in teaching tutorial.

[ditman]

@gOzaru you can always try --web-renderer html so you don't encounter the CORS issue with images, as suggested above.

[j-vasil]

• I've tried working through friendlyeats twice in the last two days. They still have this issue even though it was reported more than two months ago. The commit ID of code is 6f7603c33f2ef0f7e37ff1730991e1982327aa6f; I'm not sure how to identify the instructions webpage (although both have the same date on page 0). More generally, over the last week, I've tried running at least four different codelab examples and all but one couldn't be completed. Very frustrating to newbies. [Especially newbies who thought that Flutter was the way to go to develop a simple app for a friend's school project :-(. ]
• Is there a way to sort codelab projects by "last tested date"?
• Any suggestions for a more appropriate place to post comments like this?

[j-vasil]

@ditman said:

PS: Same thing a bunch of steps down, when building for web: flutter build --web-renderer html needs to be added to the build command!

I tried deploying using this build command (looks like your comment omitted the 'web'): $ flutter build web --web-renderer html

When I deployed the page this way the app page came up as a blank page. Depending upon which responses I gave to the 'init hosting' questions, I also sometimes saw an opening page that said "Welcome -- Firebase Hosting Setup Complete". All my build steps are documented in a response to issue https://github.com/FirebaseExtended/codelab-friendlyeats-flutter/issues/9.

[iekuzmuk]

this is how it works: flutter run -d chrome --web-renderer html

[omartinma]

@ditman what would be the solution if we need canvaskit?

[ditman]

@omartinma ensure that your image files are returned from the CDN with the appropriate CORS Response Headers for your app, at the bare minimum: Access-Control-Allow-Origin, as described in the error message.

For example, this is how'd you configure a GCP storage bucket to add the CORS response headers to it: https://cloud.google.com/storage/docs/configuring-cors#gsutil

And this is how you'd configure an S3 bucket: https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html (I think, never tried this one! :P)

[dasharath8998]

omartinma If you really need the canvaskit, the below solution works for me for the S3 bucket. Please refer to the steps in the below link and also to have it secure check, given an example of mine as mentioned below.

Steps to follow: https://stackoverflow.com/a/73807573

A better JSON file to make sure your images are secure and not available publically:

 [
      {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "POST"],
        "AllowedOrigins": ["https://foo.bar.org"],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
      }
    ]

• Into 'AllowedOrigins' set your hosting URL, and now it will work on that URL only, still, it will not load on your localhost, to make it runnable into your localhost set "*" instead of that URL into 'AllowedOrigins'.

[ditman]

How are you people still finding this repo? The codelab should have been archived a while ago :)

[DylanoHa]

How are you people still finding this repo? The codelab should have been archived a while ago :)

It's one of the first to show up on google when searching for the cors error when using canvaskit

[ditman]

This should be the main tracking issue:

• https://github.com/flutter/flutter/issues/149843

The codelab itself would need a big rewrite; right now its code is severely outdated!