Angular 17 SSR：如何获取HTTP请求头？@nguniversal方案已失效

1. 替换令牌导入来源 #

原代码依赖@nguniversal/express-engine/tokens中的REQUEST/RESPONSE令牌，在@angular/ssr中需改为从@angular/ssr导入：

import { REQUEST, RESPONSE } from '@angular/ssr';
import { Optional, Inject } from '@angular/core';
// 引入express的Request类型（可选，用于类型提示）
import type { Request } from 'express';

2. 调整组件/服务中的注入逻辑 #

注入逻辑基本不变，但需增加服务端环境判断（避免浏览器端报错）：

constructor(
  @Optional() @Inject(REQUEST) private request: Request,
  // 其他依赖...
) {
  // 仅在服务端执行请求头操作
  if (this.request) {
    const targetHeader = this.request.headers['your-target-header'];
    // 处理获取到的头信息
    console.log('服务端请求头:', targetHeader);
  }
}

3. 在server.ts中配置依赖提供者 #

确保在renderApplication的platformProviders中传入当前请求和响应对象：

import { renderApplication } from '@angular/platform-server';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { REQUEST, RESPONSE } from '@angular/ssr';
import express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

const server = express();
const indexHtml = readFileSync(join(process.cwd(), 'dist/browser/index.html'), 'utf-8');

server.get('*', (req, res) => {
  renderApplication(AppServerModule, {
    document: indexHtml,
    url: req.originalUrl,
    platformProviders: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      // 注入当前请求对象
      { provide: REQUEST, useValue: req },
      // 注入当前响应对象（如果需要操作响应）
      { provide: RESPONSE, useValue: res },
    ],
  }).then((html) => res.send(html));
});

关键说明 #

• @angular/ssr已整合原@nguniversal的核心能力，无需再依赖@nguniversal/express-engine包
• 必须在server.ts中显式提供REQUEST/RESPONSE的实例，否则注入会返回null
• 始终通过if (this.request)判断环境，避免浏览器端因注入为空导致的错误

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