feat: Support caching of responses with `Vary` header, and fix browser caching of adjacent pages/endpoints

[oscarhermoso]

(fixes #9780)

Expand below to see recorded GIF of the issue - notice that on "forward" navigation the browser renders the endpoint response from cache, instead of the expected HTML response.

Before/after

Before

After

• fix: Include Vary: Accept header on responses to GET requests
• feat: Allow caching of requests with Vary (as long as it's not Vary: *)

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• [x] This message body should clearly illustrate what problems it solves.
• [x] Ideally, include a test that fails without this PR but passes with it.

Tests

• [x] Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• [x] If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: a0a4d3af0d48f5166de44696c140c282e8db3b11

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jaylinski]

Edit: I created an issue: https://github.com/sveltejs/kit/issues/10366

This change broke an app of mine. When returning a fetch()-response (via node undici) directly to SvelteKit, undici will throw TypeError: immutable, because the change in this PR tries to modify the (immutable) undici-header.

Is there a good fix for this or do I have to clone the response-object so that the headers are mutable again? 🤔

Example for reproduction

+server.ts

import type { RequestHandler } from './$types';

// Proxy requests to API
export const GET = (async ({ request }) => {
	const headers = new Headers({ Authorization: `Bearer xyz` });

	return await fetch('https://api.test/', {
		method: request.method,
		headers,
		body: request.body,
		// @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1483
		duplex: 'half'
	});
}) satisfies RequestHandler;