Angular SSR重定向后报错：Cannot set headers after they are sent to the client

方案1：用TransferState传递重定向状态到server.ts #

在组件层标记重定向状态，让Node端感知并跳过header设置：

1. app.component.ts 中标记重定向状态

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({...})
export class AppComponent {
  constructor(
    private router: Router,
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnInit() {
    const shouldRedirect = /* 你的特定判断条件 */;
    if (shouldRedirect) {
      if (isPlatformServer(this.platformId)) {
        const redirectKey = makeStateKey<boolean>('hasRedirected');
        this.transferState.set(redirectKey, true);
      }
      this.router.navigate(['/target-path']);
    }
  }
}

2. server.ts 中读取状态并跳过setHeader

import { renderModule } from '@angular/platform-server';
import { AppServerModule } from './src/main.server';
import { readFileSync } from 'fs';
import { join } from 'path';
import { TransferState, makeStateKey } from '@angular/platform-browser';

// ... 其他server.ts初始化代码

server.get('*', (req, res) => {
  const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
  const transferState = new TransferState();

  renderModule(AppServerModule, {
    document: template,
    url: req.url,
    extraProviders: [
      { provide: TransferState, useValue: transferState }
    ]
  }).then(html => {
    const hasRedirected = transferState.get(makeStateKey<boolean>('hasRedirected'), false);
    if (!hasRedirected) {
      // 仅未触发重定向时设置header
      res.setHeader('Your-Custom-Header', 'header-value');
    }
    res.send(html);
  });
});

方案2：监听响应发送状态，避免重复设置header #

在server.ts中通过监听响应的finish事件，判断是否已发送响应，跳过后续header操作：

server.get('*', (req, res) => {
  let headersSent = false;
  res.on('finish', () => {
    headersSent = true;
  });

  const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

  renderModule(AppServerModule, {
    document: template,
    url: req.url
  }).then(html => {
    if (!headersSent) {
      res.setHeader('Your-Custom-Header', 'header-value');
    }
    res.send(html);
  });
});

方案3：直接在server.ts中处理重定向（推荐） #

如果重定向条件可以在Node层判断（比如基于请求路径、参数等），优先把逻辑移到server.ts，从根源避免组件重定向后Node端继续执行：

server.get('*', (req, res) => {
  // 在这里判断重定向条件，比如根据req.path、req.query等
  const shouldRedirect = req.path === '/old-path' || req.query.forceRedirect === 'true';
  
  if (shouldRedirect) {
    res.redirect(302, '/target-url');
    return; // 终止后续逻辑，不执行渲染和header设置
  }

  // 正常渲染流程
  const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
  renderModule(AppServerModule, {
    document: template,
    url: req.url
  }).then(html => {
    res.setHeader('Your-Custom-Header', 'header-value');
    res.send(html);
  });
});

内容的提问来源于stack exchange，提问作者Behnam Aminazad