Fix middleware header propagation

packages/next/server/next-server.ts

@@ -624,7 +624,7 @@ export default class Server {
 
     const subreq = params.request.headers[`x-middleware-subrequest`]
     const subrequests = typeof subreq === 'string' ? subreq.split(':') : []
-
+    const allHeaders = new Headers()
     let result: FetchEventResult | null = null
 
     for (const middleware of this.middleware || []) {
@@ -667,6 +667,10 @@ export default class Server {
           },
         })
 
+        for (let [key, value] of result.response.headers) {
+          allHeaders.set(key, value)
+        }
+
         if (!this.renderOpts.dev) {
           result.waitUntil.catch((error) => {
             console.error(`Uncaught: middleware waitUntil errored`, error)
@@ -681,6 +685,10 @@ export default class Server {
 
     if (!result) {
       this.render404(params.request, params.response, params.parsed)
+    } else {
+      for (let [key, value] of allHeaders) {
+        result.response.headers.set(key, value)
+      }
     }
 
     return result

test/integration/middleware-core/pages/responses/_middleware.js

@@ -15,6 +15,11 @@ export async function middleware(request, ev) {
     next.headers.set('x-nested-header', 'valid')
   }
 
+  // Ensure deep can override top header
+  if (url.searchParams.get('override-me') === 'true') {
+    next.headers.set('x-override-me', 'top')
+  }
+
   // Sends a header
   if (url.pathname === '/responses/header') {
     next.headers.set('x-first-header', 'valid')

test/integration/middleware-core/pages/responses/deep/_middleware.js

@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server'
+
+export async function middleware(request, _event) {
+  const next = NextResponse.next()
+  next.headers.set('x-deep-header', 'valid')
+  if (request.nextUrl.searchParams.get('override-me') === 'true') {
+    next.headers.set('x-override-me', 'deep')
+  }
+  return next
+}

test/integration/middleware-core/pages/responses/deep/index.js

@@ -0,0 +1,10 @@
+function Deep() {
+  return (
+    <div>
+      <h1>Deep</h1>
+      <p>This is a deep page with deep middleware, check the headers</p>
+    </div>
+  )
+}
+
+export default Deep

test/integration/middleware-core/test/index.test.js

@@ -325,6 +325,16 @@ function responseTests(locale = '') {
     )
     expect(res.headers.get('x-first-header')).toBe('valid')
   })
+
+  it(`${locale} should respond with top level headers and override with deep headers`, async () => {
+    const res = await fetchViaHTTP(
+      context.appPort,
+      `${locale}/responses/deep?nested-header=true&override-me=true`
+    )
+    expect(res.headers.get('x-nested-header')).toBe('valid')
+    expect(res.headers.get('x-deep-header')).toBe('valid')
+    expect(res.headers.get('x-override-me')).toBe('deep')
+  })
 }
 
 function interfaceTests(locale = '') {