I want to modify the url of the Request object, but I have some problems.

const r = () =>
  new Request("post", {
    method: "post",
    body: JSON.stringify({ name: "none" }),
  });

fetch(r()); // ok

fetch(new Request("post", r())); // net::ERR_H2_OR_QUIC_REQUIRED

On a server that does not support http2, the second request will fail.

On a server that supports http2, both requests succeed and the server receives the request body. However, in the Chrome network panel, the payload of the second request cannot be viewed.

The first request has the Payload panel:

But the second does not:

So what's the difference between these two request? How can I make second request work on the serve that does not support http2? How can I have payload panel on chrome devtools?