在前端开发中，我们经常需要与服务器进行通信。当我们向服务器发送请求时，浏览器会自动添加一些信息到请求头（HTTP header）中，例如 User-Agent、Referer、Cookie 等等。这些请求头字段包含了很多有用的信息，我们可以通过 JavaScript 来获取它们。
HTTP 请求头
HTTP 请求头是客户端向服务器发送请求时附带的一些额外信息，包括了以下几个部分：
- 请求行：包含了请求方法、URL 和协议版本。
- 请求头：包含了客户端环境和请求相关的信息，如 Cookie、User-Agent、Referer 等。
- 请求体：包含了客户端提交的数据，在 POST 或 PUT 请求中使用。
在请求头中，每个字段的名字和值都由冒号 : 分隔，例如：
--- - -------- ----- --------------- ----------- ----------- -------- -- ----- ------ ---- -------- -------------- ------------ ------- -------------------------------------------------------------------------- ---------------- -------------- ---------------- ----- -------- -- ----------- ---------- -------------------------- -
方法
要访问 HTTP 请求头字段，我们可以使用 XMLHttpRequest 对象或者 fetch 函数来发送请求，并在回调函数中获取响应头。
使用 XMLHttpRequest
----- --- - --- ----------------- --------------- ------------- ---------------------------------------- ------------------ ---------- - ---------- - ----- ------- - ---------------------------- --------------------- -- -----------
在这个例子中，我们使用 XMLHttpRequest 对象发送一个 GET 请求到 /api/data 接口，并设置了一个请求头字段 X-Requested-With。在响应的回调函数中，我们可以通过调用 getAllResponseHeaders 方法来获取所有的响应头字段，它会返回一个字符串，包含了每个响应头字段的名字和值。
使用 fetch
------------------ - -------- - ------------------- ---------------- - -- ------------------------ - ----- ------- - ----------------- --------------------- ---
在这个例子中，我们使用 fetch 函数发送一个 GET 请求到 /api/data 接口，并设置了一个请求头字段 X-Requested-With。在响应的 then 回调函数中，我们可以直接访问响应对象的 headers 属性，它是一个 Headers 对象，包含了所有的响应头字段。
结论
在本文中，我们介绍了 HTTP 请求头的基本概念和结构，并且演示了如何通过 JavaScript 访问请求头字段。这些技术对于前端开发者来说非常实用，可以帮助我们更好地理解和掌握网络通信技术，同时也可以帮助我们设计更加灵活和高效的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24942