fix(@angular/ssr): ensure correct Location header for redirects behind a proxy

Previously, when the application was served behind a proxy, server-side redirects generated an incorrect `Location` header, causing navigation issues. This fix ensures that the `Location` header uses the port available from the `Host` header, enabling accurate redirects in proxy environments.

Author: alan-agius4

packages/angular/ssr/node/src/request.ts

@@ -83,18 +83,42 @@ function createRequestUrl(nodeRequest: IncomingMessage | Http2ServerRequest): UR
     originalUrl,
   } = nodeRequest as IncomingMessage & { originalUrl?: string };
   const protocol =
-    headers['x-forwarded-proto'] ?? ('encrypted' in socket && socket.encrypted ? 'https' : 'http');
-  const hostname = headers['x-forwarded-host'] ?? headers.host ?? headers[':authority'];
-  const port = headers['x-forwarded-port'] ?? socket.localPort;
+    getFirstForwardedValue(headers['x-forwarded-proto']) ??
+    ('encrypted' in socket && socket.encrypted ? 'https' : 'http');
+  const hostname =
+    getFirstForwardedValue(headers['x-forwarded-host']) ?? headers.host ?? headers[':authority'];
 
   if (Array.isArray(hostname)) {
     throw new Error('host value cannot be an array.');
   }
 
   let hostnameWithPort = hostname;
-  if (port && !hostname?.includes(':')) {
-    hostnameWithPort += `:${port}`;
+  if (!hostname?.includes(':')) {
+    const port = getFirstForwardedValue(headers['x-forwarded-port']);
+    if (port) {
+      hostnameWithPort += `:${port}`;
+    }
   }
 
   return new URL(originalUrl ?? url, `${protocol}://${hostnameWithPort}`);
 }
+
+/**
+ * Extracts the first value from a multi-value header string.
+ *
+ * @param multiValueHeader - A string or an array of strings representing the header values.
+ *                           If it's a string, values are expected to be comma-separated.
+ * @returns The first trimmed value from the multi-value header, or `undefined` if the input is invalid or empty.
+ *
+ * @example
+ * ```typescript
+ * getFirstForwardedValue("value1, value2, value3"); // "value1"
+ * getFirstForwardedValue(["value1", "value2"]); // "value1"
+ * getFirstForwardedValue(undefined); // undefined
+ * ```
+ */
+function getFirstForwardedValue(
+  multiValueHeader: string | string[] | undefined,
+): string | undefined {
+  return multiValueHeader ? multiValueHeader.toString().split(',', 1)[0]?.trim() : undefined;
+}

packages/angular/ssr/src/app.ts

@@ -161,14 +161,15 @@ export class AngularServerApp {
 
     const { redirectTo, status, renderMode } = matchedRoute;
     if (redirectTo !== undefined) {
-      return Response.redirect(
-        new URL(buildPathWithParams(redirectTo, url.pathname), url),
+      return new Response(null, {
         // Note: The status code is validated during route extraction.
         // 302 Found is used by default for redirections
         // See: https://developer.mozilla.org/en-US/docs/Web/API/Response/redirect_static#status
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (status as any) ?? 302,
-      );
+        status: status ?? 302,
+        headers: {
+          'Location': buildPathWithParams(redirectTo, url.pathname),
+        },
+      });
     }
 
     if (renderMode === RenderMode.Prerender) {

packages/angular/ssr/test/app_spec.ts

@@ -106,25 +106,25 @@ describe('AngularServerApp', () => {
 
       it('should correctly handle top level redirects', async () => {
         const response = await app.handle(new Request('http://localhost/redirect'));
-        expect(response?.headers.get('location')).toContain('http://localhost/home');
+        expect(response?.headers.get('location')).toContain('/home');
         expect(response?.status).toBe(302);
       });
 
       it('should correctly handle relative nested redirects', async () => {
         const response = await app.handle(new Request('http://localhost/redirect/relative'));
-        expect(response?.headers.get('location')).toContain('http://localhost/redirect/home');
+        expect(response?.headers.get('location')).toContain('/redirect/home');
         expect(response?.status).toBe(302);
       });
 
       it('should correctly handle relative nested redirects with parameter', async () => {
         const response = await app.handle(new Request('http://localhost/redirect/param/relative'));
-        expect(response?.headers.get('location')).toContain('http://localhost/redirect/param/home');
+        expect(response?.headers.get('location')).toContain('/redirect/param/home');
         expect(response?.status).toBe(302);
       });
 
       it('should correctly handle absolute nested redirects', async () => {
         const response = await app.handle(new Request('http://localhost/redirect/absolute'));
-        expect(response?.headers.get('location')).toContain('http://localhost/home');
+        expect(response?.headers.get('location')).toContain('/home');
         expect(response?.status).toBe(302);
       });