CORS issue with image(or other resources) loading in wasm.

[KevinT3Hu]

When, say, use a <img> tag to load a remote image in a normal html webpage, the following headers are set by browser:

Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: image

Then even if the server does not respond with a cors allow origin header, the resource still can be loaded.

However, when I try to load an image (either using some libs like coil or request the image by hand) in compose web, the requests are sent not from a corresponding tag like <img>, so the above headers are set to cors and empty which will not be successful if cors headers are not sent by server.

I am wondering if there is even a way to fix since the headers are not modifiable but set by browser.

Just for reference, the code I used to display image is listed below

import coil3.compose.AsyncImage

AsyncImage(
            model = url,
            contentDescription = "",
        )

And if no cors headers are set server-side, then this network request fails with CORS-Missing-Allow-Origin in Firefox.

Affected platforms

• Web (K/Wasm) - Canvas based API
• Web (K/JS) - Canvas based API

[TomislavMladenov]

We have the same problem.

[Matuyuhi]

Me too. but, in the production, I am able to handle this by setting up Nginx as a reverse proxy.

[matsumo0922]

I am encountering the same problem and am having great difficulty. Any progress on this issue?

[KevinT3Hu]

I do think the real problem is that you cannot know that what is requested is really an image without a tag or something similar. If it is allowed to use wasm script to request an image, it is actually allowing any binary blobs which I believe is against the web security standards.

So there should be a way that declares and makes sure that what is requested is indeed an image to be shown?

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.