kit
kit copied to clipboard
Different url.origin with browser load() vs server load() using vite
Describe the bug
I am running Sveltekit behind a reverse proxy which does the TLS/HTTPS termination. It then passes all requests using HTTP to Sveltekit.
-
My production build uses the nodejs adapter, which allows setting the origin through an env var, e.g.
ORIGIN=https://my.domain. In this case, browser load({url}) and server load({url}) are identical and using the value of ORIGIN. -
Is there a way to configure something similar in dev? Currently,
url.originreturns different values for browser load() and server load() when using either 'vite dev' or 'vite preview'
Browser load({url}) returns url.origin = https://... Server load({url}) returns url.orgin = http://...
Reproduction
# same issue with both commands:
vite dev --host 0.0.0.0
vite preview --host 0.0.0.0
// +page.ts
/** @type {import('./$types').PageLoad} */
export async function load({ url }: PageLoadEvent) {
console.log(url.origin) // http://... is returned during SSR, https://... is returned during CSR
}
Logs
No response
System Info
System:
OS: Linux 4.18 Red Hat Enterprise Linux 8.6 (Ootpa)
CPU: (2) x64 Intel(R) Xeon(R) Gold 6240R CPU @ 2.40GHz
Memory: 8.24 GB / 15.46 GB
Container: Yes
Shell: 4.4.20 - /usr/bin/bash
Binaries:
Node: 18.8.0 - /usr/bin/node
npm: 8.18.0 - /usr/bin/npm
npmPackages:
@sveltejs/adapter-node: next => 1.0.0-next.88
@sveltejs/kit: next => 1.0.0-next.477
svelte: ^3.44.0 => 3.50.0
vite: ^3.1.0 => 3.1.0
Browser = Brave, Version 1.43.89 Chromium: 105.0.5195.102 (Official Build) (64-bit)
Severity
serious, but I can work around it
Additional Information
Besides causing CORS issues, mismatching url.origin for browser vs server is also causing an inconsistent behavior with fetch. This is because fetch appears to skip making an HTTP call on the server if the origin matches the fetched URL, but it doesn't skip the HTTP call if the url.origin is using a different protocol (e.g. http) than the fetched URL (e.g. https).
Being able to force the origin to a value in dev, similar to how we can set the ORIGIN variable with the nodejs adapter would be an acceptable fix to me.
Can you use https://vitejs.dev/config/server-options.html#server-https to serve HTTPS directly during development rather than using a proxy?
We prefer using the same HTTPS proxy that we use in our staging and prod environments. The proxy handles CORS with its own middleware.
We run both Sveltekit and an external Go API under the same domain to be able to use first-party cookies for session management.