JavaScript 获取 HTTP 请求头信息

JavaScript 可以通过几种方式获取 HTTP 请求头信息，但具体能获取哪些信息取决于运行环境和上下文。

浏览器环境中的限制

在浏览器环境中，由于安全限制，JavaScript 通常不能直接访问完整的 HTTP 请求头。这是为了防止潜在的跨站脚本攻击(XSS)和信息泄露。

可用的方法

1. 获取当前页面的响应头

// 使用 Fetch API
fetch(location.href)
  .then(response => {
    const headers = response.headers;
    console.log(headers.get('content-type'));
    // 遍历所有头信息
    headers.forEach((value, name) => {
      console.log(`${name}: ${value}`);
    });
  });

// 或者使用 XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', location.href);
xhr.onreadystatechange = function() {
  if (xhr.readyState === xhr.HEADERS_RECEIVED) {
    console.log(xhr.getAllResponseHeaders());
    console.log(xhr.getResponseHeader('content-type'));
  }
};
xhr.send();

2. 获取自定义请求的头信息

当你发起 AJAX 请求时，可以设置和获取自定义头信息：

fetch('/api/data', {
  headers: {
    'X-Custom-Header': 'value'
  }
})
.then(response => {
  console.log(response.headers.get('X-Custom-Response-Header'));
});

3. 服务端 JavaScript (Node.js)

在 Node.js 环境中，你可以访问完整的请求头信息：

const http = require('http');

http.createServer((req, res) => {
  console.log(req.headers); // 完整的请求头对象
  console.log(req.headers['user-agent']); // 特定头信息

  res.end('Hello World');
}).listen(3000);

重要限制

1. 浏览器安全策略：浏览器会限制访问某些敏感头信息，如 Cookie 和 Set-Cookie。

2. CORS 限制：跨域请求时，默认只能访问以下简单响应头：

   • Cache-Control
   • Content-Language
   • Content-Type
   • Expires
   • Last-Modified
   • Pragma

   要访问其他头信息，服务器需要在响应中包含 Access-Control-Expose-Headers 头。

3. 无法直接获取请求头：浏览器中的 JavaScript 只能获取响应头，不能直接获取发出的请求头（除非是你自己设置的）。

替代方案

如果需要更多头信息访问权限，可以考虑：

1. 通过服务器端代码收集头信息，然后通过 API 提供给前端
2. 使用 Web 扩展（如 Chrome 扩展）在特定权限下访问更多头信息

希望这些信息对你有帮助！如果你有更具体的需求场景，可以提供更多细节，我可以给出更有针对性的建议。