Svelte API proxy cors

Question

I am not sure if this belongs here, but I am having issues with developing my svelte app. During development it is currently running on a standalone server (followed a guide that is using rollup and sirv) and targeting a backend API on a different port.

Later on these will be merged, but for now during development I am seeing a lot of cors issues(which makes sense) and since I am not currently able to change the backend I am wondering what the normal course of action is to get this working?

I assume that I should somehow create a middleware proxy that somehow ties into rollup, but I am far from sure about how.

So any suggestions on how I can set this up?

just tested running with this: https://www.npmjs.com/package/local-cors-proxy but that did not work, because I need to have credentials: "include" for a particular fetch request and it results in The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Answer 1

I ran in to the same issue today and with a little investigation in the Rollup ecosystem it seems that you could decide on using the rollup-plugin-dev plugin which allows for a parameter proxy (with seems to use koa-better-http-proxy). With this plugin you could configure a proxy that even accepts custom functions to handle the requests, giving you control over what happens. Which is perhaps what you are looking for.

However I wanted to keep the live reloading in my application that is set up using the rollup-plugin-livereload plugin. Yet as both the livereload and dev plugin provide their own server you can only use one at the same time.

Some more research presented me with this article by Rich Harris with as consensus a general rule that Rollup is used for library development and Webpack for application development. With this in mind I set up the Webpack svelte template which allows the configuration of the devServer with a proxy as described in their documentation. This is the route I took for my application.