creating a new Request from an existing object does not keep the request's method

[gazs]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.2
  npm: 8.7.0
  Yarn: 1.22.15
  pnpm: 6.11.0
Relevant packages:
  next: 12.1.5
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

n/a

How are you deploying your application? (if relevant)

n/a

Describe the Bug

1. when creating a Request object from an existing Request object using the polyfill, the method is not copied over

const request = new Request('http://example.com', { method: 'POST', body: 'hello'})
const request2  = new Request(request)

throws: TypeError: Request with GET/HEAD method cannot have body

this is because the polyfill takes method from the optional init parameter of Request#constructor:

next.js/packages/next/server/web/spec-compliant/request.ts

Lines 19 to 26 in 842e4ec

	const method = init.method?.toUpperCase() ?? 'GET'
	if (
	(method === 'GET' || method === 'HEAD') &&
	(init.body || (input instanceof BaseRequest && getInstanceBody(input)))
	) {
	throw new TypeError('Request with GET/HEAD method cannot have body')
	}

2. when fetching a Request object in a _middleware, the method is ignored:

const request = new Request('http://example.com', { method: 'POST', body: 'hello'})
const response = await fetch(request)

expect(response.req.method).toEqual('POST') // <-- return 'GET'

next.js/packages/next/server/web/sandbox/context.ts

Lines 152 to 173 in d5e767b

	context.fetch = (input: RequestInfo, init: RequestInit = {}) => {
	init.headers = new Headers(init.headers ?? {})
	const prevs = init.headers.get(`x-middleware-subrequest`)?.split(':') || []
	const value = prevs.concat(options.module).join(':')
	init.headers.set('x-middleware-subrequest', value)
	if (!init.headers.has('user-agent')) {
	init.headers.set(`user-agent`, `Next.js Middleware`)
	}
	if (typeof input === 'object' && 'url' in input) {
	return fetch(input.url, {
	...init,
	headers: {
	...Object.fromEntries(input.headers),
	...Object.fromEntries(init.headers),
	},
	})
	}
	return fetch(String(input), init)
	}

Expected Behavior

the expected behaviour is the method and any other properties are copied over to the new request object

To Reproduce

for example in _middleware.ts:

const request = new Request('http://example.com', { method: 'POST', body: 'hello'})
const request2  = new Request(request)
request2.method === 'POST'

[ambrauer]

@gazs @balazsorban44 We are experiencing this as well (case 2 in OP). A simple repro we have in a _middleware.ts:

import { NextResponse } from 'next/server';

export default async function () {
  const ok = await fetch('https://httpbin.org/post', {
    method: 'POST',
    body: 'test',
  });
  console.log(ok); // <-- 200 OK

  const fails = await fetch(
    new Request('https://httpbin.org/post', {
      method: 'POST',
      body: 'test',
    })
  );
  console.log(fails); // <-- 405 METHOD NOT ALLOWED (GET is sent)

  return NextResponse.next();
}

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.