前端如何通过window对象等原生能力获取HTTP请求头

你尝试的new window.Response().headers.values()写法无法实现需求：该代码创建的是一个全新的空响应实例，和当前页面实际发起的HTTP请求没有任何关联，拿到的headers永远是空集合。

受浏览器安全策略限制，目前没有通用的前端原生API可以直接读取当前页面初始请求的完整HTTP请求头，所有可行方案都有适用场景限制，以下是可落地的替代方案：

• 间接获取公开标准头
  部分无敏感属性的标准请求头可以通过浏览器公开API直接获取，不需要任何额外配置：
  • User-Agent头：通过navigator.userAgent读取
  • Referer头：通过document.referrer读取
  • Accept-Language头：通过navigator.language或navigator.languages读取
• Service Worker拦截获取全量头
  如果你可以控制当前域名的静态资源部署，可以通过注册Service Worker拦截页面请求，拿到完整请求头：

  // service-worker.js 拦截逻辑
  self.addEventListener('fetch', event => {
    // 匹配页面主文档导航请求
    if (event.request.mode === 'navigate') {
      const headers = Object.fromEntries(event.request.headers.entries())
      // 向页面主线程传递头信息
      event.waitUntil(
        self.clients.get(event.clientId).then(client => {
          client?.postMessage({ type: 'requestHeaders', data: headers })
        })
      )
    }
    event.respondWith(fetch(event.request))
  })
  

  页面内接收逻辑：

  // 页面主线程代码
  navigator.serviceWorker.addEventListener('message', e => {
    if (e.data.type === 'requestHeaders') {
      console.log('页面请求头', e.data.data)
    }
  })
  

  注意：该方案仅适用于Service Worker激活后的页面加载，首次访问页面时Service Worker未注册，无法拿到首次请求的头信息。
• SSR注入获取头
  如果你用了服务端渲染架构，不需要额外发起请求，可以直接在服务端生成HTML时，把需要的请求头注入到页面全局变量中，前端直接读取即可，这是落地成本最低的方案。

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