fix: add the modified middleware headers to the request, not response

update the related tests

Author: ericapisani

packages/runtime/src/templates/edge-shared/utils.test.ts

@@ -9,19 +9,23 @@ describe('updateModifiedHeaders', () => {
     // been modified with 'x-middleware-request' added to it, this is more to confirm the test case
     mockHeaders.set('x-middleware-request-foo', 'bar')
 
-    const mockResult: FetchEventResult = {
-      response: new Response('', { headers: mockHeaders }),
-      waitUntil: Promise.resolve(),
+    const mockResponse = {
+      headers: mockHeaders
     }
 
-    mockResult.response = updateModifiedHeaders(mockResult.response)
+    const mockRequest = {
+      headers: new Headers()
+    }
+
+    updateModifiedHeaders(mockRequest.headers, mockResponse.headers)
 
-    assertEquals(mockResult.response.headers.get('x-middleware-request-foo'), 'bar')
+    assertEquals(mockRequest.headers.get('x-middleware-request-foo'), null)
   })
 
   describe("when the 'x-middleware-override-headers' headers is present", () => {
     let mockHeaders
-    let mockResult: FetchEventResult
+    let mockRequest: { headers: Headers }
+    let mockResponse: { headers: Headers }
 
     beforeEach(() => {
       mockHeaders = new Headers()
@@ -30,28 +34,31 @@ describe('updateModifiedHeaders', () => {
       mockHeaders.set('x-middleware-request-test', '123')
       mockHeaders.set('x-middleware-override-headers', 'hello,test')
 
-      mockResult = {
-        response: new Response('', { headers: mockHeaders }),
-        waitUntil: Promise.resolve(),
+      mockRequest = {
+        headers: new Headers()
+      }
+
+      mockResponse = {
+        headers: mockHeaders
       }
 
-      mockResult.response = updateModifiedHeaders(mockResult.response)
+      updateModifiedHeaders(mockRequest.headers, mockResponse.headers)
     })
 
-    it("does not modify headers that are missing 'x-middleware-request' in the name", () => {
-      assertEquals(mockResult.response.headers.get('foo'), 'bar')
+    it("does not modify or add headers that are missing 'x-middleware-request' in the name", () => {
+      assertEquals(mockRequest.headers.get('foo'), null)
     })
 
     it("removes 'x-middleware-request-' from headers", () => {
-      assertEquals(mockResult.response.headers.get('x-middleware-request-hello'), null)
-      assertEquals(mockResult.response.headers.get('x-middleware-request-test'), null)
+      assertEquals(mockRequest.headers.get('x-middleware-request-hello'), null)
+      assertEquals(mockRequest.headers.get('x-middleware-request-test'), null)
 
-      assertEquals(mockResult.response.headers.get('hello'), 'world')
-      assertEquals(mockResult.response.headers.get('test'), '123')
+      assertEquals(mockRequest.headers.get('hello'), 'world')
+      assertEquals(mockRequest.headers.get('test'), '123')
     })
 
     it("removes 'x-middleware-override-headers' after cleaning headers", () => {
-      assertEquals(mockResult.response.headers.get('x-middleware-override-headers'), null)
+      assertEquals(mockRequest.headers.get('x-middleware-override-headers'), null)
     })
   })
 })

packages/runtime/src/templates/edge-shared/utils.ts

@@ -66,25 +66,23 @@ function isMiddlewareResponse(response: Response | MiddlewareResponse): response
 // Related Next.js code:
 // * https://github.com/vercel/next.js/blob/68d06fe015b28d8f81da52ca107a5f4bd72ab37c/packages/next/server/next-server.ts#L1918-L1928
 // * https://github.com/vercel/next.js/blob/43c9d8940dc42337dd2f7d66aa90e6abf952278e/packages/next/server/web/spec-extension/response.ts#L10-L27
-export function updateModifiedHeaders(response: Response) {
-  const overriddenHeaders = response.headers.get('x-middleware-override-headers')
+export function updateModifiedHeaders(requestHeaders: Headers, responseHeaders: Headers) {
+  const overriddenHeaders = responseHeaders.get('x-middleware-override-headers')
 
   if (!overriddenHeaders) {
-    return response
+    return
   }
 
   const headersToUpdate = overriddenHeaders.split(',').map((header) => header.trim())
 
   for (const header of headersToUpdate) {
     const oldHeaderKey = 'x-middleware-request-' + header
-    const headerValue = response.headers.get(oldHeaderKey) || ''
+    const headerValue = responseHeaders.get(oldHeaderKey) || ''
 
-    response.headers.set(header, headerValue)
-    response.headers.delete(oldHeaderKey)
+    requestHeaders.set(header, headerValue)
+    responseHeaders.delete(oldHeaderKey)
   }
-  response.headers.delete('x-middleware-override-headers')
-
-  return response
+  responseHeaders.delete('x-middleware-override-headers')
 }
 
 export const buildResponse = async ({
@@ -96,7 +94,8 @@ export const buildResponse = async ({
   request: Request
   context: Context
 }) => {
-  result.response = updateModifiedHeaders(result.response)
+  debugger
+  updateModifiedHeaders(request.headers, result.response.headers)
 
   // They've returned the MiddlewareRequest directly, so we'll call `next()` for them.
   if (isMiddlewareRequest(result.response)) {