如何通过JavaScript访问HTTP请求头字段？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要与服务器进行通信。当我们向服务器发送请求时，浏览器会自动添加一些信息到请求头（HTTP header）中，例如 User-Agent、Referer、Cookie 等等。这些请求头字段包含了很多有用的信息，我们可以通过 JavaScript 来获取它们。

HTTP 请求头

HTTP 请求头是客户端向服务器发送请求时附带的一些额外信息，包括了以下几个部分：

请求行：包含了请求方法、URL 和协议版本。
请求头：包含了客户端环境和请求相关的信息，如 Cookie、User-Agent、Referer 等。
请求体：包含了客户端提交的数据，在 POST 或 PUT 请求中使用。

在请求头中，每个字段的名字和值都由冒号 : 分隔，例如：

GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Upgrade-Insecure-Requests: 1

方法

要访问 HTTP 请求头字段，我们可以使用 XMLHttpRequest 对象或者 fetch 函数来发送请求，并在回调函数中获取响应头。

使用 XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function() {
  const headers = xhr.getAllResponseHeaders();
  console.log(headers);
};
xhr.send();

在这个例子中，我们使用 XMLHttpRequest 对象发送一个 GET 请求到 /api/data 接口，并设置了一个请求头字段 X-Requested-With。在响应的回调函数中，我们可以通过调用 getAllResponseHeaders 方法来获取所有的响应头字段，它会返回一个字符串，包含了每个响应头字段的名字和值。

使用 fetch

fetch('/api/data', {
  headers: { 'X-Requested-With': 'XMLHttpRequest' }
})
.then(function(response) {
  const headers = response.headers;
  console.log(headers);
});

在这个例子中，我们使用 fetch 函数发送一个 GET 请求到 /api/data 接口，并设置了一个请求头字段 X-Requested-With。在响应的 then 回调函数中，我们可以直接访问响应对象的 headers 属性，它是一个 Headers 对象，包含了所有的响应头字段。

结论

在本文中，我们介绍了 HTTP 请求头的基本概念和结构，并且演示了如何通过 JavaScript 访问请求头字段。这些技术对于前端开发者来说非常实用，可以帮助我们更好地理解和掌握网络通信技术，同时也可以帮助我们设计更加灵活和高效的 Web 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/24942