kit icon indicating copy to clipboard operation
kit copied to clipboard

Different url.origin with browser load() vs server load() using vite

Open eneault opened this issue 3 years ago • 1 comments

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.origin returns 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.

eneault avatar Sep 08 '22 21:09 eneault

Can you use https://vitejs.dev/config/server-options.html#server-https to serve HTTPS directly during development rather than using a proxy?

Conduitry avatar Sep 11 '22 05:09 Conduitry

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.

eneault avatar May 04 '23 12:05 eneault