fix(@angular/ssr): support custom headers in redirect responses

Updates createRedirectResponse to accept an optional Record<string, string> of headers, allowing custom headers to be merged into the redirect response. The Location and Vary: X-Forwarded-Prefix headers are automatically set to ensure correct routing and proxy behavior.

AngularServerApp now passes relevant headers from the matched route or response context when creating a redirect.

Author: alan-agius4

packages/angular/ssr/src/app.ts

@@ -190,7 +190,7 @@ export class AngularServerApp {
       return null;
     }
 
-    const { redirectTo, status, renderMode } = matchedRoute;
+    const { redirectTo, status, renderMode, headers } = matchedRoute;
 
     if (redirectTo !== undefined) {
       return createRedirectResponse(
@@ -199,6 +199,7 @@ export class AngularServerApp {
           buildPathWithParams(redirectTo, url.pathname),
         ),
         status,
+        headers,
       );
     }
 
@@ -352,7 +353,7 @@ export class AngularServerApp {
     }
 
     if (result.redirectTo) {
-      return createRedirectResponse(result.redirectTo, responseInit.status);
+      return createRedirectResponse(result.redirectTo, responseInit.status, headers);
     }
 
     if (renderMode === RenderMode.Prerender) {

packages/angular/ssr/src/utils/redirect.ts

@@ -27,20 +27,40 @@ export function isValidRedirectResponseCode(code: number): boolean {
  * @param location - The URL to which the response should redirect.
  * @param status - The HTTP status code for the redirection. Defaults to 302 (Found).
  *                 See: https://developer.mozilla.org/en-US/docs/Web/API/Response/redirect_static#status
+ * @param headers - Additional headers to include in the response.
  * @returns A `Response` object representing the HTTP redirect.
  */
-export function createRedirectResponse(location: string, status = 302): Response {
+export function createRedirectResponse(
+  location: string,
+  status = 302,
+  headers?: Record<string, string>,
+): Response {
   if (ngDevMode && !isValidRedirectResponseCode(status)) {
     throw new Error(
       `Invalid redirect status code: ${status}. ` +
         `Please use one of the following redirect response codes: ${[...VALID_REDIRECT_RESPONSE_CODES.values()].join(', ')}.`,
     );
   }
 
+  const resHeaders = new Headers(headers);
+  if (ngDevMode && resHeaders.has('location')) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Location header "${resHeaders.get('location')}" will ignored and set to "${location}".`,
+    );
+  }
+
+  let vary = resHeaders.get('Vary') ?? '';
+  if (vary) {
+    vary += ', ';
+  }
+  vary += 'X-Forwarded-Prefix';
+
+  resHeaders.set('Vary', vary);
+  resHeaders.set('Location', location);
+
   return new Response(null, {
     status,
-    headers: {
-      'Location': location,
-    },
+    headers: resHeaders,
   });
 }

packages/angular/ssr/test/utils/redirect_spec.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { createRedirectResponse } from '../../src/utils/redirect';
+
+describe('Redirect Utils', () => {
+  describe('createRedirectResponse', () => {
+    it('should create a redirect response with default status 302', () => {
+      const response = createRedirectResponse('/home');
+      expect(response.status).toBe(302);
+      expect(response.headers.get('Location')).toBe('/home');
+      expect(response.headers.get('Vary')).toBe('X-Forwarded-Prefix');
+    });
+
+    it('should create a redirect response with a custom status', () => {
+      const response = createRedirectResponse('/home', 301);
+      expect(response.status).toBe(301);
+      expect(response.headers.get('Location')).toBe('/home');
+    });
+
+    it('should allow providing additional headers', () => {
+      const response = createRedirectResponse('/home', 302, { 'X-Custom': 'value' });
+      expect(response.headers.get('X-Custom')).toBe('value');
+      expect(response.headers.get('Location')).toBe('/home');
+      expect(response.headers.get('Vary')).toBe('X-Forwarded-Prefix');
+    });
+
+    it('should append to Vary header instead of overriding it', () => {
+      const response = createRedirectResponse('/home', 302, {
+        'Location': '/evil',
+        'Vary': 'Host',
+      });
+      expect(response.headers.get('Location')).toBe('/home');
+      expect(response.headers.get('Vary')).toBe('Host, X-Forwarded-Prefix');
+    });
+
+    it('should warn if Location header is provided in extra headers in dev mode', () => {
+      // @ts-expect-error accessing global
+      globalThis.ngDevMode = true;
+      const warnSpy = spyOn(console, 'warn');
+      createRedirectResponse('/home', 302, { 'Location': '/evil' });
+      expect(warnSpy).toHaveBeenCalledWith(
+        'Location header "/evil" will ignored and set to "/home".',
+      );
+    });
+
+    it('should throw error for invalid redirect status code in dev mode', () => {
+      // @ts-expect-error accessing global
+      globalThis.ngDevMode = true;
+      expect(() => createRedirectResponse('/home', 200)).toThrowError(
+        /Invalid redirect status code: 200/,
+      );
+    });
+  });
+});