Confused about svelte's fetch behavior in load functions

[levi-jcbs]

Hi guys,

I'm using an external api hosted under a subpath using a reverse proxy. For authentication purposes I need sveltekit to inherit a session cookie for fetch requests by the server's load function.

This only works with absolute urls (e.g. https://localhost/api/), but it runs twice then (also during client hydration).

With relative urls (e.g. /api/) it only runs once but doesn't inherit cookies.

I've made a small repo to reproduce this behavior: https://github.com/levi-jcbs/svelte-external-api-test

I don't understand whats happening here. I need the fetch function to inherit cookies and only run once. Also it would be good if I could use a relative url.

Is this a bug or not? Can somebody please expain?

Thanks!

[eltigerchino]

I couldn't get the reproduction to work fully but if I had to guess what the issue is:

1. Double fetching with a relative URL

There's a mismatch between the origin SvelteKit thinks it's running on on the server and the the origin the client sees in the browser. This causes the fetch two run twice since it thinks the URL is different. When accessing the app in development through https, Vite should be configured to run in https too. Otherwise, SvelteKit will perform the fetch on the server thinking the origin protocol is http instead of https. Meanwhile, the client uses the URL in the browser which is https.

2. Cookies not being inherited with an absolute URL

I couldn't reproduce this one. However, if the host used for the fetch is different from the host you've accessed the application through, SvelteKit will think it's two different hosts and not pass the cookies.

Cookies will only be passed through the provided fetch function if the target host is the same as the SvelteKit application or a more specific subdomain of it.

https://svelte.dev/docs/kit/load#Cookies

You can choose to manually forward the cookies, etc. in the handleFetch function. https://svelte.dev/docs/kit/hooks#Server-hooks-handleFetch

[levi-jcbs]

Thank you very much, @eltigerchino. You are right, I think this is actually a vite issue.

I can't configure vite to to take the origin from x-forwarded- headers when running behind a reverse proxy. I think that's just a missing feature. When building the app and running with node, it works just fine.

But thats no problem, I can just configure vite to proxy the api and run on port 80 so I can get completely rid of the reverse proxy in my dev envirnonment. I actually don't need https because the browser allows to send cookies with secure flag over http on localhost.

I've commited the neccesary changes and some explanation to the reproduction repo: levi-jcbs/svelte-external-api-test@af5c012