Not work with Node.js v21 when using https in dev server

[hronro]

Describe the bug

The dev server always responds "Invalid request body"

The original issue can be found at sveltejs/kit#11213.

I believe the problem lies in the incompatibility between the vite dev server and HTTP/2, which is the default protocol when using HTTPS.

While many people only use HTTP on their dev servers to avoid this issue, we have specific cookie strategies that require both our dev server and production server to use HTTPS.

UPDATE: I recently upgraded to SvelteKit 2 (which is using Vite 5) and Node.js v21.5.0, the issue persists with a different error message:

TypeError: Headers.append: ":method" is an invalid header name.
    at webidl.errors.exception (node:internal/deps/undici/undici:1636:14)
    at webidl.errors.invalidArgument (node:internal/deps/undici/undici:1647:28)
    at appendHeader (node:internal/deps/undici/undici:2053:29)
    at fill (node:internal/deps/undici/undici:2039:11)
    at new Request (node:internal/deps/undici/undici:6151:13)

Reproduction

https://github.com/hronro/vite-https-issue

Steps to reproduce

• Run pnpm i
• Run pnpm dev
• Open the page in browser

System Info

System:
    OS: Linux 6.6 Arch Linux
    CPU: (14) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 26.50 GB / 27.41 GB
    Container: Yes
    Shell: 3.7.0 - /usr/bin/fish
  Binaries:
    Node: 21.5.0 - /usr/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.5 - /usr/bin/npm
    pnpm: 8.13.1 - /usr/bin/pnpm
  npmPackages:
    vite: ^5.0.10 => 5.0.10

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[XiSenao]

I think this is a way to be compatible with Request.
sveltejs/kit#3572

[hronro]

@XiSenao Could you please explain more details about this? The PR you linked was merged 2 years ago.

[XiSenao]

I think it may be related to the changes in this logic(node 21.4.0).

function isValidHTTPToken (characters) {
  if (characters.length === 0) {
    return false
  }
  for (let i = 0; i < characters.length; ++i) {
    if (!isTokenCharCode(characters.charCodeAt(i))) {
      return false
    }
  }
  return true
}

https://github.com/nodejs/node/blob/68c8472ed9edbf1d3fbb1e46cb65b678ee52312c/deps/undici/src/lib/fetch/util.js#L140-L150
https://datatracker.ietf.org/doc/html/rfc7230#page-27

It seems that Request is not compatible with some features of H2.
Configuring proxy for Vite can downgrade to HTTP/1.1 and also avoid the occurrence of problems. ref 02cc24f
I don't know if this issue is important enough to require Vite to be compatible with it. @hronro

[bluwy]

@XiSenao do you know where we could fix to fix the issue? I'm slightly inclined to close this as there had always been issues with odd-numbered Node.js versions and often it's a Node.js bug instead.

[XiSenao]

I missed the notification for this issue😂. Yes, I think Node is still in an unstable stage, and I may not be inclined to be compatible with unstable versions of Node. @bluwy

[hi-ogawa]

FYI, Remix also had a similar story as sveltekit when adapting Vite's http2:

• HTTP2 Pseudo headers get rejected by Remix [\w Vite] remix-run/remix#7867

Initially I suggested to strip out pseudo headers (:method, etc...) when converting Node's IncomingMessage class to Web Request class:

• fix(remix-dev/vite): remove http2 pseudo headers from internal request remix-run/remix#8049

which I thought is necessary since Remix's Request/Response related polyfill (https://github.com/remix-run/web-std-io) didn't accept such headers at that time (in sveltekit case, I guess it was node-fetch polyfill).

Since Remix's polyfill is opt-in, when disabling such polyfill, it's actually working since Node 18/20's global Request (which is essentially undici's Request) was accepting pseudo headers. So, eventually Remix team decided to follow that behavior in their polyfill as well:

• Add support for HTTP2 pseudo headers remix-run/web-std-io#55

Apparently, Undici "fixed" this behavior in response to this issue and Node 21 is currently rejecting http2 pseudo header:

• Non-HTTPToken characters can be used in header names nodejs/undici#2409

Regardless of whether this strict behavior would land in stable node or not, personally I feel this is a framework concern than Vite itself since framework is the one converting from Node-style IncomingMessage class to Web/fetch-style Request class (also deciding whether polyfill Request or not).

Btw, I made a little script to test node's http2 here https://github.com/hi-ogawa/repro-http2-pseudo-headers/blob/main/repro.mjs

[sapphi-red]

Yeah, the error was happening at this line and I also think this needs to be fixed on SvelteKit side.
https://github.com/sveltejs/kit/blob/b884c943440b9871589a2e3f680adb76e54db488/packages/kit/src/exports/node/index.js#L109-L118

Although, I think we should fix the types of connect on our side, too.

vite/packages/vite/src/node/http.ts

Lines 117 to 118 in dbb2604

	// @ts-expect-error TODO: is this correct?
	app,