Content-Type for responses with sveltes fetch always text/plain on client

[eikaramba]

Describe the bug

I am fetching ressources from a database on the same server (also happening on localhost) and after migrating to latest svelte-kit (before was version next.3xxx) i observe there is a difference in the headers between server and client fetch.

Unfortunately i need to check the headers and call res.json reps. res.text accordingly and this is not working anymore.

Reproduction

i tried to recreate this on stackblitz but get CORS issues (see https://stackblitz.com/edit/sveltejs-kit-template-default-uyfzch?file=src/routes/test/+page.js)
however locally you can easily test it by doing this:

0. Create sveltekit from scratch, no changes.
1. Create a /test route with an empty +page.svelte
2. create a +page.js with

export async function load({parent ,fetch}) {

    let res = await fetch("https://run.mocky.io/v3/2daed5d1-bfdd-4777-8e0b-a60e3ea8af52", {
        method: "GET",
        headers: {
            "Accept": "application/json"
        }
    });

    console.log(res.headers.get("content-type")); //Should be application/json; but is text/plain during client side rendering
    res = await res.json();
    console.log(res);
    
    return { };
}

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 17.19 GB / 31.92 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.53)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.96 => 1.0.0-next.96
    @sveltejs/kit: ^1.0.0-next.507 => 1.0.0-next.507
    svelte: ^3.50.1 => 3.50.1
    vite: ^3.1.4 => 3.1.4

Severity

blocking all usage of SvelteKit

Additional Information

No response

[benmccann]

This sounds extremely similar to #6412. Can you clarify the differences between the two?

[eikaramba]

in 6412 it sounded like it happens when using server.js file and netlify-adapter only on production.

for me it happens for adapter-node and on the client side of the +page.js file - its very similar but not quite completely. Reproducing my case above is easier as it happens locally

[dummdidumm]

This happens only during initial hydration, i.e. the server produces the SSR and then load reruns on the client for hydration. During that, the response header is no longer present so it's treated as text instead of json. The header is no longer present because of no headers being serialized by default. You can fix this by adding the following to your hooks.server.js:

/** @type {import('@sveltejs/kit').Handle} */
export function handle({ event, resolve }) {
	return resolve(event, {
		// you can also seralize other headers here if needed
		filterSerializedResponseHeaders: (name, value) => name === 'content-type'
	});
}

This is also mentioned here in the docs: https://kit.svelte.dev/docs/load#input-methods-fetch

That said, I'm wondering how to make this error more discoverable, and if it makes sense to have some subset of serialized response headers by default. cc @Conduitry @Rich-Harris who might have an opinion on this. In #6569 where it was implemented this exact case was discussed, and it looks like it added some code to surface this error - so now I'm wondering why that error isn't triggered here. Update: That check was moved in #7113 and seems to no longer work now.

[eikaramba]

thank you very much, that actually fixed it. i would have never found this myself in the docs.