在 JavaScript 中获取 Fetch 请求的响应Headers 数据

梦想家创建于 2025年9月26日642

在 JavaScript 中获取 Fetch 请求的 Headers 数据

在 JavaScript 中使用 Fetch API 时，你可以通过以下几种方式获取请求或响应的 Headers 数据：

获取响应(Response)的 Headers

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => {
    // 获取单个header值
    const contentType = response.headers.get('Content-Type');
    console.log('Content-Type:', contentType);
    
    // 遍历所有headers
    response.headers.forEach((value, name) => {
      console.log(`${name}: ${value}`);
    });
    
    // 将headers转为普通对象
    const headersObject = {};
    response.headers.forEach((value, name) => {
      headersObject[name] = value;
    });
    console.log('Headers对象:', headersObject);
    
    return response.json();
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

获取请求(Request)的 Headers

如果你需要查看发出的请求的 Headers，可以在创建请求时设置：

javascript 复制代码

const myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('Authorization', 'Bearer token123');

const request = new Request('https://api.example.com/data', {
  method: 'POST',
  headers: myHeaders,
  body: JSON.stringify({key: 'value'})
});

// 查看请求headers
console.log('Request Content-Type:', request.headers.get('Content-Type'));

fetch(request)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

使用 async/await 语法

javascript 复制代码

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    // 获取特定header
    const contentType = response.headers.get('Content-Type');
    console.log('Content-Type:', contentType);
    
    const data = await response.json();
    // 处理数据...
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

注意事项

某些 Headers 可能受到浏览器的安全限制而无法访问
跨域请求时，默认只能访问简单的响应头（如 Cache-Control、Content-Language 等），需要服务器设置 Access-Control-Expose-Headers 才能访问其他头
Headers 对象是不可变的，你不能直接修改它

希望这些信息对你有帮助！欢迎交流～