Add X-Forwarded-Host header to requests (#8706)

* Set the x-forwarded-host header on requests

* Added changeset

Author: jamesopstad

.changeset/common-baths-fold.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+Set the `x-forwarded-host` header to the original host in requests. This fixes a bug where libraries such as Clerk would redirect to the workerd host rather than the Vite host.

packages/vite-plugin-cloudflare/playground/worker/__tests__/basic-functionality.spec.ts renamed to packages/vite-plugin-cloudflare/playground/worker/__tests__/worker.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { getTextResponse, serverLogs } from "../../__test-utils__";
+import { getTextResponse, serverLogs, viteTestUrl } from "../../__test-utils__";
 
 test("basic hello-world functionality", async () => {
 	expect(await getTextResponse()).toEqual("Hello World!");
@@ -10,3 +10,9 @@ test("basic dev logging", async () => {
 	expect(serverLogs.errors.join()).toContain("__console error__");
 	expect(serverLogs.errors.join()).toContain("__console warn__");
 });
+
+test("receives the original host as the `X-Forwarded-Host` header", async () => {
+	const testUrl = new URL(viteTestUrl);
+	const response = await getTextResponse("/x-forwarded-host");
+	expect(response).toBe(testUrl.host);
+});

packages/vite-plugin-cloudflare/playground/worker/src/index.ts

@@ -1,5 +1,11 @@
 export default {
-	async fetch() {
+	async fetch(request) {
+		const url = new URL(request.url);
+
+		if (url.pathname === "/x-forwarded-host") {
+			return new Response(request.headers.get("X-Forwarded-Host"));
+		}
+
 		console.log("__console log__");
 		console.warn("__console warn__");
 		console.error("__console error__");

packages/vite-plugin-cloudflare/src/utils.ts

@@ -22,6 +22,11 @@ export function getRouterWorker(miniflare: Miniflare) {
 }
 
 export function toMiniflareRequest(request: Request): MiniflareRequest {
+	// We set the X-Forwarded-Host header to the original host as the `Host` header inside a Worker will contain the workerd host
+	const host = request.headers.get("Host");
+	if (host) {
+		request.headers.set("X-Forwarded-Host", host);
+	}
 	// Undici sets the `Sec-Fetch-Mode` header to `cors` so we capture it in a custom header to be converted back later.
 	const secFetchMode = request.headers.get("Sec-Fetch-Mode");
 	if (secFetchMode) {