如何在Angular应用内获取初始化时HTTP请求的请求头？

Angular作为前端框架运行在浏览器环境中，无法直接获取页面初始请求的请求头（这是浏览器与服务器之间的交互数据，前端JS没有权限直接读取），必须通过服务器端中转的方式将请求头信息传递给Angular应用，以下是两种可行方案：

方案一：扩展Angular CLI开发服务器 #

适合开发环境使用，通过自定义Webpack配置捕获初始请求并注入请求头信息：

1. 安装依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建webpack.config.js，添加以下配置：

module.exports = {
  devServer: {
    onBeforeSetupMiddleware(devServer) {
      devServer.app.get('/', (req, res, next) => {
        // 提取需要的请求头（按需调整）
        const targetHeaders = {
          'user-agent': req.headers['user-agent'],
          'accept': req.headers['accept'],
          'x-forwarded-for': req.headers['x-forwarded-for']
        };

        // 读取并修改index.html，注入全局变量
        const fs = require('fs');
        const path = require('path');
        const indexPath = path.join(__dirname, 'src', 'index.html');
        let indexContent = fs.readFileSync(indexPath, 'utf8');
        
        const injectScript = `<script>window.initialRequestHeaders = ${JSON.stringify(targetHeaders)};</script>`;
        indexContent = indexContent.replace('</head>', `${injectScript}</head>`);

        res.setHeader('Content-Type', 'text/html');
        res.send(indexContent);
      });
    }
  }
};

3. 修改angular.json中的开发服务器配置，替换为自定义Webpack builder：

"architect": {
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      "browserTarget": "your-project-name:build"
    }
  }
}

4. 在Angular应用中读取全局变量：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  initialRequestHeaders: any;

  ngOnInit(): void {
    // 类型断言避免TS报错
    this.initialRequestHeaders = (window as any).initialRequestHeaders;
    console.log('初始请求头信息:', this.initialRequestHeaders);
  }
}

方案二：生产环境服务器注入（以Nginx为例） #

如果是生产环境部署，可通过服务器（如Nginx）修改index.html，将请求头信息注入页面：

1. 在src/index.html的<head>中添加占位脚本：

<script>
  window.initialRequestHeaders = {
    "user-agent": "{{USER_AGENT}}",
    "accept": "{{ACCEPT_HEADER}}"
  };
</script>

2. 配置Nginx的location块，使用sub_filter替换占位符：

location / {
  root /usr/share/nginx/html;
  index index.html;
  
  # 替换请求头占位符
  sub_filter '{{USER_AGENT}}' '$http_user_agent';
  sub_filter '{{ACCEPT_HEADER}}' '$http_accept';
  sub_filter_once off;
}

3. 重启Nginx后，Angular应用即可通过window.initialRequestHeaders读取初始请求头信息。

注意事项 #

• 仅注入业务需要的请求头，避免传递敏感信息（如Cookie、Authorization等）；
• 若使用其他服务器（如Apache、Node.js服务器），可参考对应服务器的文档实现类似的内容替换逻辑。

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