make sure headers set in middlewares are accessibly by layouts and pa…

…ges (#811)

* make sure headers set in middlewares are accessibly by layouts and pages

* update tsconfig to include vitest config file

.changeset/long-falcons-jump.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+make sure headers set in middlewares are accessibly by layouts and pages

packages/next-on-pages/templates/_worker.js/routes-matcher.ts

@@ -223,6 +223,9 @@ export class RoutesMatcher {
 			this.status = resp.status;
 		}
 
+		// copy to the request object the headers that have been set by the middleware
+		applyHeaders(this.reqCtx.request.headers, resp.headers);
+
 		applyHeaders(this.headers.normal, resp.headers);
 		this.headers.middlewareLocation = resp.headers.get('location');
 	}

pages-e2e/features/issue797/issue.test.ts

@@ -0,0 +1,27 @@
+import { getAssertVisible } from '@features-utils/getAssertVisible';
+import { describe, expect, test } from 'vitest';
+
+describe('issue-797', () => {
+	test('should pass headers set in the middleware along to layouts and pages', async () => {
+		const page = await BROWSER.newPage();
+		const assertVisible = getAssertVisible(page);
+		const pageUrl = `${DEPLOYMENT_URL}/`;
+		await page.goto(pageUrl);
+		const html = await assertVisible('html');
+
+		const layoutAttrHeaderFromMiddleware = await html.getAttribute(
+			'layout-attr-header-from-middleware',
+		);
+
+		expect(layoutAttrHeaderFromMiddleware).toEqual(
+			'this is a header set by the middleware!',
+		);
+
+		const gottenReqHeaderP = await assertVisible(
+			'p[data-test-id="header-from-middleware"]',
+		);
+		expect(await gottenReqHeaderP.innerText()).toEqual(
+			'header from middleware: this is a header set by the middleware!',
+		);
+	});
+});

pages-e2e/features/issue797/main.feature

@@ -0,0 +1,3 @@
+{
+	"setup": "node --loader tsm setup.ts"
+}

pages-e2e/features/issue797/setup.ts

@@ -0,0 +1 @@
+// no setup required

pages-e2e/fixtures/issue797app/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.wrangler

pages-e2e/fixtures/issue797app/env.d.ts

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// by running `wrangler types --env-interface CloudflareEnv env.d.ts`
+
+interface CloudflareEnv {}

pages-e2e/fixtures/issue797app/main.fixture

@@ -0,0 +1,12 @@
+{
+	"features": [
+		"issue797"
+	],
+	"buildConfig": {
+		"buildCommand": "npx --force ../../../packages/next-on-pages",
+		"buildOutputDirectory": ".vercel/output/static"
+	},
+	"deploymentConfig": {
+		"compatibilityFlags": ["nodejs_compat"]
+	}
+}

pages-e2e/fixtures/issue797app/next.config.mjs

@@ -0,0 +1,13 @@
+import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+
+// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
+// (when running the application with `next dev`), for more information see:
+// https://github.com/cloudflare/next-on-pages/blob/5712c57ea7/internal-packages/next-dev/README.md
+if (process.env.NODE_ENV === 'development') {
+	await setupDevPlatform();
+}
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;