Flutter web can’t load network image from another domain

by

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:

  1. Open the GCP console, select your project and start a cloud terminal session by clicking the >_ icon button in the top navbar.

  2. 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.

  3. Run gsutil cors set cors.json gs://your-bucket

If you need more information: https://cloud.google.com/storage/docs/configuring-cors

Leave a Comment