JavaScript 获取 HTTP 请求头信息

JavaScript 在浏览器环境中获取 HTTP 请求头信息的能力是有限的，主要取决于您是想获取请求头(request headers)还是响应头(response headers)，以及是在客户端还是服务端环境。

客户端(浏览器)JavaScript

获取响应头(Response Headers)

fetch('https://example.com')
  .then(response => {
    // 获取单个响应头
    const contentType = response.headers.get('Content-Type');
    console.log('Content-Type:', contentType);

    // 获取所有响应头
    console.log('All headers:');
    response.headers.forEach((value, name) => {
      console.log(`${name}: ${value}`);
    });
  });

限制：浏览器出于安全考虑，默认只允许访问以下安全响应头： - Cache-Control - Content-Language - Content-Length - Content-Type - Expires - Last-Modified - Pragma

要访问其他响应头，服务器必须设置 Access-Control-Expose-Headers。

获取请求头(Request Headers)

在客户端JavaScript中，无法直接获取浏览器发送的完整请求头，这是出于安全考虑。你只能：

1. 设置自定义请求头：

fetch('https://example.com', {
  headers: {
    'X-Custom-Header': 'value'
  }
});

2. 查看你设置的请求头（但看不到浏览器自动添加的如Cookie等头）

服务端JavaScript (Node.js)

在Node.js环境中，你可以完全访问请求和响应头：

const http = require('http');

const server = http.createServer((req, res) => {
  // 获取请求头
  console.log('请求头:', req.headers);

  // 设置响应头
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(3000);

替代方案

如果需要完整的请求头信息，可以考虑：

1. 通过服务器端记录并返回给客户端
2. 使用浏览器开发者工具的Network面板查看
3. 对于调试目的，可以使用代理工具如Charles或Fiddler

总结

• 客户端JS：只能有限访问响应头，几乎无法访问完整请求头
• 服务端JS：可以完全访问请求和响应头
• 跨域请求时，响应头的访问受CORS规则限制