React/JS开发：页面加载时如何获取初始请求的所有Request Headers

核心结论 #

浏览器端运行的JavaScript（包括React框架内的代码）无法直接读取页面初始加载时的导航请求的完整Request Headers，浏览器没有开放对应API给前端侧做这个操作。

现有代码的问题 #

你使用的XMLHttpRequest.getAllResponseHeaders()方法本身就是设计用来读取响应头的，自然无法拿到请求侧信息。另外这个逻辑是新发起了一个独立的GET请求，和页面初始加载的请求完全不是同一个，哪怕有办法拿到这个新请求的头，也不等于初始请求的头。
同时要注意：哪怕是你自己手动发起的XHR/fetch请求，JS也没有内置的getAllRequestHeaders类的API可以获取浏览器自动追加的请求头，只能获取到你自己代码里手动设置的自定义请求头。

可行解决方案 #

• 方案1：服务端注入（最常用、可拿全量头）
  服务端返回HTML页面时，直接把收到的初始请求的Headers序列化后注入到页面的全局变量中，前端直接读取即可。示例如下（以Node.js Express服务端为例）：
  服务端模板注入代码：

  // Express路由返回页面时注入头信息
  app.get('/', (req, res) => {
    const headers = JSON.stringify(req.headers);
    res.send(`
      <!DOCTYPE html>
      <html>
        <body>
          <script>window.__INITIAL_REQUEST_HEADERS__ = ${headers}</script>
          <div id="root"></div>
        </body>
      </html>
    `);
  })
  

  前端读取代码：

  const initialHeaders = window.__INITIAL_REQUEST_HEADERS__;
  

• 方案2：前端手动获取部分头对应值
  如果没有服务端修改能力，只能通过浏览器内置API拿到部分请求头对应的信息，无法获取全量：
  • User-Agent：navigator.userAgent
  • Cookie：document.cookie
  • 语言偏好：navigator.language
  • 页面来源Referer：document.referrer
• 方案3：浏览器扩展场景
  如果你的需求是在浏览器扩展中实现，可以调用扩展专属的webRequestAPI监听页面初始请求，获取完整的请求头，该方案不适用于普通Web页面。

注意事项 #

通过服务端注入头信息时，建议过滤掉Cookie、Authorization等敏感头，避免敏感信息泄露引发XSS安全风险。

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