Angular 4/5中PHP getallheaders()函数等效方法及启动时获取请求头

嘿，我明白你的困扰了——你想在Angular应用刚启动（还没发任何GET/POST请求）的时候拿到像X-MSISDN、X-IMSI这类自定义请求头，但Angular的Interceptor只管用它自己发起的请求，页面首次加载的请求头好像摸不着。先给你说个核心点：前端JavaScript在浏览器环境下，本身是无法直接获取页面初始加载时的HTTP请求头的，这是浏览器的安全限制，除了少数几个允许的头（比如User-Agent），自定义头都拿不到。不过有两个靠谱的办法能解决这个问题：

方案1：后端注入头信息到页面 #

既然前端拿不到，就让处理初始请求的PHP后端把需要的头信息直接写到页面里，比如嵌入全局变量：

1. 在你的index.html（或者后端渲染的模板文件）里，让PHP把请求头输出成全局变量：

<script>
  // 注意：这里要确保PHP已经正确获取到这些头，比如用$_SERVER['HTTP_X_MSISDN']
  window.appInitialHeaders = {
    msisdn: '<?php echo isset($_SERVER["HTTP_X_MSISDN"]) ? $_SERVER["HTTP_X_MSISDN"] : ""; ?>',
    imsi: '<?php echo isset($_SERVER["HTTP_X_IMSI"]) ? $_SERVER["HTTP_X_IMSI"] : ""; ?>'
  };
</script>

2. 在Angular的根组件（比如AppComponent）里，读取这个全局变量并保存起来：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 类型断言避免TS报错
    const initialHeaders = (window as any).appInitialHeaders;
    if (initialHeaders) {
      console.log('X-MSISDN:', initialHeaders.msisdn);
      console.log('X-IMSI:', initialHeaders.imsi);
      // 可以把这些值存入Angular服务，供整个应用的组件使用
    }
  }
}

方案2：服务器端渲染（SSR）场景下直接获取 #

如果你的Angular应用用了SSR（比如Angular Universal），那在服务器端的代码里可以直接拿到请求头，再传递给前端：

1. 在服务器入口文件（比如server.ts）里，处理请求时提取头信息，作为依赖注入给Angular：

import { NgExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';

const app = express();

app.get('*', (req, res) => {
  // 从请求中提取需要的头
  const initialHeaders = {
    msisdn: req.headers['x-msisdn'],
    imsi: req.headers['x-imsi']
  };

  res.render('index', {
    req,
    res,
    providers: [
      // 定义一个自定义令牌，供前端注入
      { provide: 'APP_INITIAL_HEADERS', useValue: initialHeaders }
    ]
  });
});

2. 在Angular组件或服务里，通过注入获取这些头：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(@Inject('APP_INITIAL_HEADERS') private initialHeaders: any) {}

  ngOnInit(): void {
    console.log('初始请求头:', this.initialHeaders);
  }
}

为什么Interceptor不管用？ #

再给你理清楚：Angular的HttpInterceptor是用来拦截Angular自己通过HttpClient发起的HTTP请求的，而页面首次加载的请求是浏览器直接发送给服务器的，这个请求完全在Angular的生命周期之外，所以Interceptor根本碰不到它，自然拿不到这些头。

安全提醒 #

如果这些头信息包含敏感内容，一定要确保后端先做合法性验证，不要随便把未验证的数据暴露给前端，避免XSS攻击风险。

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