Issue with server-side fetch since version 1.0.0-next.253

Describe the bug

I’ve been having issues with server-side fetch from version 1.0.0-next.253 onwards. It seems that the headers get re-written by Svelte Kit in a way that can corrupt certain requests.

This is the specific change that seems to have caused the issue for me.

The same requests still seem to work fine on the client side.

Reproduction

The options for my fetch requests look something like this. Unfortunately the GraphQL endpoint isn’t a public one, so I can’t share a “working” demo.

{
	body: REQUEST_STRING,
	headers: new Headers({
		"Content-Type": "application/json",
		"Authorization": "Basic " + CREDENTIALS
	}),
	method: "POST",
	mode: "cors"
}

Judging by the error log and my inspection of the response, it seems that the API is getting the request, but is returning an GUI console containing the query and result rather than a JSON response. This is causing the “unexpected token” error.

Logs

Unexpected token < in JSON at position 2

SyntaxError: Unexpected token < in JSON at position 2
    at JSON.parse (<anonymous>)
    at Proxy.<anonymous> (APP_PATH/.svelte-kit/runtime/server/index.js:1835:21)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Module.getData (/src/lib/utils.js:84:14)
    at async load (index.svelte:14:21)
    at async load_node (APP_PATH/.svelte-kit/runtime/server/index.js:1864:12)
    at async respond$1 (APP_PATH/.svelte-kit/runtime/server/index.js:2242:15)
    at async resolve (APP_PATH/.svelte-kit/runtime/server/index.js:2744:11)
    at async respond (APP_PATH/.svelte-kit/runtime/server/index.js:2688:20)
    at async APP_PATH/node_modules/@sveltejs/kit/dist/chunks/index.js:299:24

System Info

System:
    OS: macOS 11.6.1
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 1.14 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    npm: 7.18.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 97.0.1
    Safari: 14.1.2
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.0 => 1.0.0-next.0 
    @sveltejs/adapter-static: ^1.0.0-next.17 => 1.0.0-next.26 
    @sveltejs/kit: ^1.0.0-next.252 => 1.0.0-next.302 
    svelte: ^3.34.0 => 3.46.4

Severity

blocking an upgrade

Additional Information

No response

[bothness]

@mrkishi Thanks for the suggestion. It seems that explicitly setting both the Accept and Content-Type headers to “application/json” returns the right JSON response in the current version of Svelte Kit. So, my fetch request options now look something like this:

{
	body: REQUEST_STRING,
	headers: new Headers({
		"Accept": "application/json",
		"Content-Type": "application/json",
		"Authorization": "Basic " + CREDENTIALS
	}),
	method: "POST",
	mode: "cors"
}

This solves the immediate issue for me, but I’ll leave it to others to decide if this still qualifies as a bug or if the discrepancies/pitfalls between server-side and client-side fetch just need to be documented somewhere.

[Conduitry]

Do you know what header is resulting in you getting HTML back from your API instead of your expected content? Is it accept? Can you override and manually pass a different value for that header to make this work in your app?

It might make sense for SvelteKit to also exclude that header when copying others over from the original request.