fix: align with spec for Request method normalization (#30)

Author: brophdawg11

.changeset/align-method-to-spec.md

@@ -0,0 +1,9 @@
+---
+"@remix-run/web-fetch": patch
+---
+
+Align with [spec](https://fetch.spec.whatwg.org/#methods) for `new Request()` `method` normalization
+
+- Only `DELETE`, `GET`, `HEAD`, `OPTIONS`, `POST`, `PUT` get automatically uppercased
+- Note that `method: "patch"` will no longer be automatically uppercased
+- Throw a `TypeError` for `CONNECT`, `TRACE`, and `TRACK`

packages/fetch/src/request.js

@@ -16,6 +16,9 @@ import {getSearch} from './utils/get-search.js';
 
 const INTERNALS = Symbol('Request internals');
 
+const forbiddenMethods = new Set(["CONNECT", "TRACE", "TRACK"]);
+const normalizedMethods = new Set(["DELETE", "GET", "HEAD", "OPTIONS", "POST", "PUT"]);
+
 /**
  * Check if `obj` is an instance of Request.
  *
@@ -33,15 +36,15 @@ const isRequest = object => {
 /**
  * Request class
  * @implements {globalThis.Request}
- * 
+ *
  * @typedef {Object} RequestState
  * @property {string} method
  * @property {RequestRedirect} redirect
  * @property {globalThis.Headers} headers
  * @property {RequestCredentials} credentials
  * @property {URL} parsedURL
  * @property {AbortSignal|null} signal
- * 
+ *
  * @typedef {Object} RequestExtraOptions
  * @property {number} [follow]
  * @property {boolean} [compress]
@@ -50,15 +53,15 @@ const isRequest = object => {
  * @property {Agent} [agent]
  * @property {number} [highWaterMark]
  * @property {boolean} [insecureHTTPParser]
- * 
+ *
  * @typedef {((url:URL) => import('http').Agent | import('https').Agent) | import('http').Agent | import('https').Agent} Agent
- * 
+ *
  * @typedef {Object} RequestOptions
  * @property {string} [method]
  * @property {ReadableStream<Uint8Array>|null} [body]
  * @property {globalThis.Headers} [headers]
  * @property {RequestRedirect} [redirect]
- * 
+ *
  */
 export default class Request extends Body {
 	/**
@@ -81,8 +84,13 @@ export default class Request extends Body {
 
 
 
+		// Normalize method: https://fetch.spec.whatwg.org/#methods
 		let method = init.method || settings.method || 'GET';
-		method = method.toUpperCase();
+		if (forbiddenMethods.has(method.toUpperCase())) {
+			throw new TypeError(`Failed to construct 'Request': '${method}' HTTP method is unsupported.`)
+		} else if (normalizedMethods.has(method.toUpperCase())) {
+			method = method.toUpperCase();
+		}
 
 		const inputBody = init.body != null
 			? init.body
@@ -100,7 +108,7 @@ export default class Request extends Body {
 		});
 		const input = settings
 
-		
+
 		const headers = /** @type {globalThis.Headers} */
 			(new Headers(init.headers || input.headers || {}));
 
@@ -121,7 +129,7 @@ export default class Request extends Body {
 		if (signal != null && !isAbortSignal(signal)) {
 			throw new TypeError('Expected signal to be an instanceof AbortSignal or EventTarget');
 		}
-		
+
 		if (!signal) {
 			let AbortControllerConstructor = typeof AbortController != "undefined"
 			? AbortController
@@ -180,11 +188,11 @@ export default class Request extends Body {
 	get destination() {
 		return ""
 	}
-	
+
 	get integrity() {
 		return ""
 	}
-	
+
 	/** @type {RequestMode} */
 	get mode() {
 		return "cors"
@@ -194,7 +202,7 @@ export default class Request extends Body {
 	get referrer() {
 		return  ""
 	}
-	
+
 	/** @type {ReferrerPolicy} */
 	get referrerPolicy() {
 		return ""
@@ -318,7 +326,7 @@ export const getNodeRequestOptions = request => {
 		port: parsedURL.port,
 		hash: parsedURL.hash,
 		search: parsedURL.search,
-		// @ts-ignore - it does not has a query 
+		// @ts-ignore - it does not has a query
 		query: parsedURL.query,
 		href: parsedURL.href,
 		method: request.method,

packages/fetch/test/request.js

@@ -88,6 +88,59 @@ describe('Request', () => {
 		expect(r2.counter).to.equal(0);
 	});
 
+	it('should throw a TypeError for forbidden methods', () => {
+		// https://fetch.spec.whatwg.org/#methods
+		const forbiddenMethods = [
+			"CONNECT",
+			"TRACE",
+			"TRACK",
+		];
+
+		forbiddenMethods.forEach(method => {
+			try {
+				new Request(base, { method: method.toLowerCase() });
+				expect(true).to.equal(false);
+			} catch (e) {
+				expect(e instanceof TypeError).to.equal(true);
+				expect(e.message).to.equal(`Failed to construct 'Request': '${method.toLowerCase()}' HTTP method is unsupported.`)
+			}
+			try {
+				new Request(base, { method: method.toUpperCase() });
+				expect(true).to.equal(false);
+			} catch (e) {
+				expect(e instanceof TypeError).to.equal(true);
+				expect(e.message).to.equal(`Failed to construct 'Request': '${method.toUpperCase()}' HTTP method is unsupported.`)
+			}
+		});
+	});
+
+	it('should normalize method', () => {
+		// https://fetch.spec.whatwg.org/#methods
+		const shouldUpperCaseMethods = [
+			"DELETE",
+			"GET",
+			"HEAD",
+			"OPTIONS",
+			"POST",
+			"PUT",
+		];
+		const otherMethods = ["PATCH", "CHICKEN"];
+
+		shouldUpperCaseMethods.forEach(method => {
+			const r1 = new Request(base, { method: method.toLowerCase() });
+			expect(r1.method).to.equal(method.toUpperCase());
+			const r2 = new Request(base, { method: method.toUpperCase() });
+			expect(r2.method).to.equal(method.toUpperCase());
+		});
+
+		otherMethods.forEach(method => {
+			const r1 = new Request(base, { method: method.toLowerCase() });
+			expect(r1.method).to.equal(method.toLowerCase());
+			const r2 = new Request(base, { method: method.toUpperCase() });
+			expect(r2.method).to.equal(method.toUpperCase());
+		});
+	});
+
 	it('should override signal on derived Request instances', () => {
 		const parentAbortController = new AbortController();
 		const derivedAbortController = new AbortController();