Hi, I am building a compose app that should load ...

# webassembly

[Florin]

Hi, I am building a compose app that should load images from a 3rd party website in a grid. I use compose-imageloader that has added support for wasm. It works as expected for all native platforms but in the browser, I get this error: Cors-Origin Resource Sharing error: MissingAllowOriginHeader .
When sending the image request, the browser adds an Origin and a Referer header. This seems relevant because the browser app I'm rewriting, doesn't send these two headers and images load correctly.
I am new to kotlin compose and wasm and I don't know how to control the image request headers in wasm/kotlin compose. Any help is appreciated.
Thanks!

[Chrimaeon]

This has nothing to do with Compose. It a browser “security” feature. You’ll need to change the server you fetch the images from to conform the policy.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[Florin]

thanks Christian. Like I said, the current webapp (streamlit) works just fine

[Chrimaeon]

Are you running your app from localhost urls? And the existing one is deployed and uses a “real” url?

[Florin]

indeed

[Chrimaeon]

So, you need the change the server to accept requests from localhost.

[Florin]

I'll try that, thanks @Chrimaeon!

[Florin]

No joy. I don't have control of the server but I tried running the wasm app on non-localhost and got the same error.
I also ran the original streamlit app in localhost and it loads images...

[Chrimaeon]

I don’t know what streamlit is but I guess the image loading library you use is using the browsers fetch method which uses CORS for security reasons.

[Chrimaeon]

In the browsers network logs you should also see HEAD requests which actually checks the CORS settings for the resource you try to load from wasm

[Florin]

no, there's no preflight check like OPTIONS or the like. only the GET

[Chrimaeon]

I’d suggest to check the source of the library and see how the loading with wasm is implemented.

[Pablichjenkov]

I believe I saw a similar thread before and one solution was to install a browser extension to bypass cors check. Obviously this will work only for development

[Florin]

it's using @Igor Yakovlev's ktor for wasm package: https://kotlinlang.slack.com/archives/CDFP59223/p1702047740826649?thread_ts=1701968310.319679&cid=CDFP59223