I would like to download images and other content ...

# compose-web

[Timo Drick]

I would like to download images and other content from other sites. When i use e.g. ktor client to download it i get the following error CORS header 'Access-Control-Allow-Origin' missing . So my question is how can i add this missing header in the dev server which is running when i execute the gradle task: wasmJsBrowserDevelopmentRun
Is it possible to configure this in the gradle file?

kotlin {
    @OptIn(ExperimentalWasmDsl::class)
    wasmJs {
        moduleName = "composeApp"
        browser {
            commonWebpackConfig {
                outputFileName = "composeApp.js"
                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
                    static = (static ?: mutableListOf()).apply {
                        // Serve sources to debug inside browser
                        add(project.projectDir.path)
                    }
                }
            }
        }
        binaries.executable()
    }
//...

[Robert Jaros]

Dev server has nothing to do with your problem. You need to add headers to your ktor client requests and those "other sites" need to support cors as well.

[Timo Drick]

Are you sure? I thought that the server hosting the web app has to provide this header.
I mean later when it will be deployed i can add this to the web server config. But during development i use the buildin one.

[Robert Jaros]

CORS headers need to be provided by the server providing the content you want to access. It can be the server hosting the web app, but I understand in your case the content is downloaded from other sites. So the cors headers need to be supported by those "other" servers.

[Timo Drick]

Ok thank you for the fast response. I am an android dveleoper and try to get an compose app running with WebAssembly. It works but this means that i can more or less only load content from my own servers right?
Or i have to deactivate this check in the browser.

[Robert Jaros]

Yes, only your own server will work out of the box. And I don't event know if popular browsers allow to deactivate cors.

[Timo Drick]

Ok thank you very much

[Timo Drick]

For my later deployment this requirements are fine. But for development it is a littlebit of a pain.

[Casey Brooks]

CORS is annoying for sure, but sometimes the server you’re trying to access has data you can set in the headers, auth key setup, etc. that tell it to send you the correct CORS headers. If that doesn’t work, you will need to proxy those requests through your own server.

For example, your frontend is running at <http://app.example.com|app.example.com>, and wants to access <http://otherapp.com|otherapp.com> which doesn’t support CORS. What you need to do is run your own API server (either at <http://app.example.com/api|app.example.com/api>, or at <http://api.example.com|api.example.com> but configured with CORS correctly). <http://app.example.com|app.example.com> makes a request to your own API server, which then makes the call to <http://otherapp.com|otherapp.com> and returns the response.

Note that this is a lot of extra work having to proxy everything through your own server, but it can also be a good practice in general. It allows you to store the API keys for <http://otherapp.com|otherapp.com> on your server, rather than having them available in the JS bundle or asking the user to log in to <http://otherapp.com|otherapp.com> for your app. It also allows you the ability to cache the responses, which improves performance for your app and also reduces the load on the other app.

[Casey Brooks]

But if you don’t actually want to run your own server and only need to address the issue for local development, you can also try setting up a 3rd-party local CORS proxy rather than writing the server yourself. I haven’t tried this personally, but something like https://github.com/garmeeh/local-cors-proxy should do the job