JavaScript 中的 SetHeader：详解 HTTP 头部设置方法及应用219

在 JavaScript 的世界里，我们经常需要与服务器进行交互，而 HTTP 头部信息扮演着至关重要的角色。它们携带着请求和响应的元数据，例如内容类型、缓存策略、身份验证信息等等。因此，掌握如何在 JavaScript 中设置 HTTP 头部（SetHeader）是构建强大和高效的 Web 应用的关键技能。然而，需要明确的是，"SetHeader" 本身并非 JavaScript 的内置方法或标准 API。 JavaScript 本身无法直接修改已经发送出去的 HTTP 请求的 Header。我们实际操作的是在发送请求之前，通过不同的方法来设置 HTTP 请求的 Header。

本文将深入探讨在 JavaScript 中如何有效地设置 HTTP 请求头部，涵盖多种常见场景和方法，并讲解其背后的原理和注意事项。我们将主要关注使用 `XMLHttpRequest` 和 `fetch` API 这两种主流方式。

使用 XMLHttpRequest 设置 HTTP 头部

XMLHttpRequest 是一个古老但仍然广泛使用的 JavaScript 对象，用于在浏览器中发送 HTTP 请求。通过它，我们可以轻松地设置 HTTP 请求头部。

以下代码演示了如何使用 XMLHttpRequest 设置 `Content-Type` 和 `Authorization` 头部：```javascript
const xhr = new XMLHttpRequest();
('POST', '/api/data', true); // 方法、URL、异步
// 设置请求头部
('Content-Type', 'application/json');
('Authorization', 'Bearer your_access_token');
// 发送请求体 (可选)
(({ key: 'value' }));
= function() {
if ( >= 200 && < 300) {
('Success:', ());
} else {
('Error:', );
}
};
= function() {
('Request failed');
};
```

这段代码首先创建了一个 XMLHttpRequest 对象，然后使用 `open()` 方法指定请求的方法、URL 和是否异步。关键在于 `setRequestHeader()` 方法，它接受两个参数：头部名称和头部值。最后，使用 `send()` 方法发送请求，并在 `onload` 和 `onerror` 事件处理程序中处理响应。

需要注意的是： `setRequestHeader()` 方法必须在 `send()` 方法之前调用。如果你试图在 `send()` 之后设置头部，将会引发错误。

使用 fetch API 设置 HTTP 头部

fetch API 是一个现代的、更简洁的用于发送 HTTP 请求的 JavaScript API。它也允许我们设置 HTTP 请求头部，但方式略有不同。

以下代码演示了如何使用 `fetch` API 设置 `Content-Type` 和 `Authorization` 头部：```javascript
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your_access_token'
},
body: ({ key: 'value' })
})
.then(response => {
if (!) {
throw new Error(`HTTP error! status: ${}`);
}
return ();
})
.then(data => {
('Success:', data);
})
.catch(error => {
('Error:', error);
});
```

这段代码使用 `fetch()` 方法发送请求，第一个参数是 URL，第二个参数是一个包含请求选项的对象。 `headers` 属性是一个对象，其中键是头部名称，值是头部值。 `body` 属性包含请求体。 `then()` 方法处理成功的响应，`catch()` 方法处理错误。

fetch API 的优势在于其简洁性和可读性，并且它基于 Promise，使得异步操作更容易处理。

设置不同类型的 HTTP 头部

除了 `Content-Type` 和 `Authorization`，还有许多其他类型的 HTTP 头部，例如：
Cache-Control: 控制缓存策略
If-Modified-Since: 条件式请求，只获取修改过的资源
User-Agent: 标识客户端浏览器
Cookie: 管理会话
Referer: 指示请求来源

这些头部都可以通过上述两种方法进行设置，只需要将相应的头部名称和值传递给 `setRequestHeader()` 或 `headers` 对象即可。

跨域请求和 CORS

当从一个域发送请求到另一个域时，浏览器会受到同源策略的限制。为了允许跨域请求，服务器需要设置适当的 CORS (Cross-Origin Resource Sharing) 头部，例如 `Access-Control-Allow-Origin`。 JavaScript 代码本身无法直接控制服务器端的 CORS 设置，只能在服务器端配置。

设置 HTTP 请求头部是 JavaScript 网络编程中一个重要的方面。本文介绍了使用 `XMLHttpRequest` 和 `fetch` API 设置 HTTP 头部的两种主要方法，并讨论了一些常见的 HTTP 头部和相关的注意事项。熟练掌握这些方法对于构建强大的 Web 应用至关重要。记住，选择哪种方法取决于你的项目需求和个人偏好，但两者都能有效地完成 HTTP 头部的设置任务。

2025-06-01

上一篇：Switch JavaScript详解：高效控制流程与常见陷阱

下一篇：零基础JavaScript学习指南：从入门到实践