Angular 13如何获取服务器初始传入请求的请求头？

Angular作为客户端框架，无法直接获取服务器接收到的初始请求头——这些头信息仅存在于服务器端的请求上下文里，浏览器（及运行在其中的Angular代码）无法直接读取完整的服务器请求头，部分敏感头甚至会被浏览器限制前端访问。

要在app.component.ts中访问这些信息，必须通过服务器中转，以下是两种常用方案：

方案一：服务器渲染时注入全局变量 #

在服务器返回index.html页面时，将需要的请求头信息嵌入到页面的<script>标签中，定义全局变量供Angular读取：

1. 服务器端处理：
   以Node.js为例，在返回index.html模板时，替换占位符插入请求头：

   <!-- 服务器渲染后的index.html -->
   <script>
     window.initialRequestHeaders = {
       'user-agent': '<%= req.headers['user-agent'] %>',
       'x-custom-header': '<%= req.headers['x-custom-header'] %>'
     };
   </script>
   

2. Angular中读取：
   在app.component.ts中声明全局变量并使用：

   import { Component, OnInit } from '@angular/core';
   
   // 声明全局变量类型
   declare const initialRequestHeaders: Record<string, string>;
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent implements OnInit {
     ngOnInit(): void {
       console.log('初始请求头:', initialRequestHeaders);
       // 在这里使用请求头信息
     }
   }
   

方案二：通过后端接口获取 #

后端提供一个接口，返回当前会话对应的初始请求头信息（需通过会话标识关联请求），Angular初始化时调用该接口：

1. 后端接口实现：
   后端维护会话级别的初始请求头存储，比如通过Session保存，然后提供接口返回：

   // Node.js Express示例接口
   app.get('/api/initial-headers', (req, res) => {
     // 假设会话中已存储初始请求头
     res.json(req.session.initialHeaders);
   });
   

2. Angular中调用接口：
   在app.component.ts中借助HttpClient请求接口：

   import { Component, OnInit } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent implements OnInit {
     constructor(private http: HttpClient) {}
   
     ngOnInit(): void {
       this.http.get<Record<string, string>>('/api/initial-headers')
         .subscribe(headers => {
           console.log('初始请求头:', headers);
           // 处理请求头数据
         });
     }
   }
   

注意：两种方案都需要后端配合，且要注意敏感头的安全处理，避免泄露不必要的信息。

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