CORS errors on Flutter web

[Kurczaak]

🐛 Bug Report

This bug happened to me after a while of using the package so it might not be easy to reproduce.
I am unable to run my project due to CORS policies. This does not happen using Flutter's Image.network. I am fetching data from my Contentful CMS backend.

Expected behavior

Flutter web project run flawlesly

Reproduction steps

Run a Flutter Web app and try to load images from Contentful CMS backend.

Configuration

Version: 3.4.1

Platform:

• 📱 iOS
• 🤖 Android
• 🕸️ Web

[Remy2701]

You can change the imageRenderMethodForWeb parameter to ImageRenderMethodForWeb.HttpGet instead of ImageRenderMethodForWeb.HtmlImage and that should fix your issue.

[pauljonescodes]

I'm still debugging this issue for my app so I'm not 100% sure on the specifics, but for what it's worth that fix did not work for me, and it appears the enum is a package other than this one I directly depend on.

[Kurczaak]

I'm currently not able to check it, but I recall I tried to go for other method but couldn't use the enum

[pauljonescodes]

I solved my problem by using the HTML renderer, it appears the default may have changed in some Flutter version upgrade. It would also appear like this is deprecated by Flutter, so I'm not sure I'd advise this solution for others if it can be avoided. Further, I'm accessing an S3 bucket which I do not control, I believe I could solve this is I controlled the CORS configuration and allowed all hosts.

[rayliverified]

Even with allow all hosts, images fail to load.

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

I wonder if it's because Wasm requires stricter headers. For example, deploying Wasm requires the server to serve these headers.

    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "credentialless"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }

Wasm might require all files to be returned with

"responseHeader": ["Content-Type"],