HTTP 头信息是向服务器发送请求时传递的元数据，通常包含一些关键信息，如浏览器类型、语言偏好以及 cookie 等。在前端开发中，有时需要向请求添加自定义头信息，例如要求服务器使用特定的编码格式或验证用户身份等。
本文将介绍如何使用 JavaScript 在客户端向 HTTP 请求添加自定义头信息，并提供示例代码和解释说明。
XMLHttpRequest 对象
XMLHttpRequest 对象是用于与服务器交换数据的 JS API，它可以执行异步和同步 GET、POST、PUT、DELETE 等操作，并允许自定义请求头信息。以下是一个 XMLHttpRequest 的基本示例：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com');
xhr.setRequestHeader('Accept-Language', 'en-US');
xhr.send();上述代码创建了一个 XMLHttpRequest 实例，然后打开了一个 GET 请求，并设置 Accept-Language 请求头为 en-US，最后通过 send() 方法发送请求。这里的 Accept-Language 是一个标准的 HTTP 请求头信息，用于表明用户的语言偏好。
fetch API
fetch API 是更现代化、易于使用的 HTTP 客户端 API，它是基于 Promise 设计的，支持链式调用、请求拦截器和响应拦截器等高级特性。与 XMLHttpRequest 相比，fetch API 的使用方法更简洁、灵活。
下面是一个使用 fetch API 添加自定义头信息的示例：
-- -------------------- ---- -------
---------------------------- -
------- ------
-------- --- ---------
--------------- -------------------
---------------- ------- - - -----
--
---------------- -- -
----------------------
---上述代码使用 fetch API 发送了一个基本的 GET 请求，其中添加了两个自定义请求头信息：Content-Type 和 Authorization。这里的 Authorization 是一个常用的自定义 HTTP 头信息，用于验证用户身份。
axios 库
axios 是一款流行的 Promise-based 的 HTTP 客户端库，它可以在浏览器和 Node.js 中使用，并提供丰富的特性，如拦截器、取消请求、自动转换响应数据等。
下面是一个使用 axios 添加自定义头信息的示例：
-- -------------------- ---- -------
------ ----- ---- --------
-------------------------------- -
-------- -
------------------- -----------------
---------------- ------- - - -----
-
---------------- -- -
----------------------
---上述代码使用 axios 库发送了一个 GET 请求，并添加了两个自定义请求头信息：X-Requested-With 和 Authorization。这里的 X-Requested-With 是一个常用的自定义 HTTP 头信息，用于指示请求是由 Ajax 发起的。
总结
本文介绍了三种在客户端中使用 JavaScript 添加自定义 HTTP 头信息的方法：XMLHttpRequest 对象、fetch API 和 axios 库。无论哪种方法，我们都可以通过设置 headers 属性来添加自定义的请求头信息，这使得我们可以更灵活、高效地与服务器进行通信。
总之，在实际开发中，我们应该根据具体的场景和需要选择适合的方法，并注意不要添加敏感或不必要的头信息，从而保障数据的安全性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25672