HTTP 头部和 Headers 对象

声明：本文主要内容来自通义灵码。

HTTP 头部

每个HTTP请求和响应都会携带一些头部字段。

XHR 请求会发送的头部字段

* 1. Accept: 浏览器能够处理的内容类型

* 2. Accept-Charset: 浏览器能够显示的字符集

* 3. Accept-Encoding: 浏览器能够处理的压缩编码 * 4. Accept-Language: 浏览器当前设置的语言

* 5. Connection: 浏览器与服务器的连接类型

* 6. Content-Type: 请求体的 MIME 类型（对于 POST 请求）

* 7. Cookie: 当前域下的 cookie 信息（如果有的话） * 8. Host: 请求的主机名和端口号

* 9. Referer: 发送请求的页面 URI

* 10. User-Agent: 浏览器的用户代理字符串

* 11. Authorization: 用于 HTTP 认证的授权头部

* 12. If-Modified-Since: 只有在指定时间之后资源被修改过才获取资源

* 13. If-None-Match: 用于条件请求的实体标签

* 14. Origin: 发起请求的源（协议、域名、端口）

浏览器自动添加的头部字段

注意：某些头部字段是浏览器自动添加的，不能通过 setRequestHeader() 方法修改

如:

Accept-Charset,

Accept-Encoding,

Access-Control-Request-Headers,

Access-Control-Request-Method,

Connection,

Content-Length,

Cookie,

Date,

DNT,

Expect,

Host,

Keep-Alive,

Origin,

Referer,

TE,

Trailer,

Transfer-Encoding,

Upgrade,

User-Agent,

Via

自定义头部字段

如果需要发送额外的请求头部，可以使用setRequestHeaders()方法。

setRequestHeaders()接收两个参数：头部字段的名称和值。

为保证请求头部被发送，必须在XHR的open()之后，send()之前调用setRequestHeaders()方法。

Headers 对象

Headers 接口允许您对 HTTP 请求和响应头进行操作。

通过 Headers 构造函数可以创建一个新的 Headers 对象。

Headers 对象提供了许多方法来添加、删除和修改 HTTP 头部信息

Headers 对象的作用域和可用性

Headers 是全局对象，可以在任何地方创建和使用，不仅仅局限于 Fetch API
它是 Fetch API 规范的一部分，但其实现独立于具体的网络请求方法
可以在任何需要处理 HTTP 头部的场景中使用 Headers 对象
浏览器环境中，Headers 构造函数是全局可用的（只要浏览器支持 Fetch API）

Headers 对象的用途不仅限于 fetch() 请求

可以用于处理 XMLHttpRequest 的请求头
可以用于解析和操作响应头
可以作为通用的 HTTP 头部处理工具
可以用于测试和模拟 HTTP 头部操作

创建一个新的 Headers 对象

var headers = new Headers();

// 添加头部信息

headers.append('Content-Type', 'application/json');

headers.append('Authorization', 'Bearer token123');

headers.append('X-Custom-Header', 'CustomValue');

// 也可以在创建时初始化头部

var initHeaders = new Headers({ 'Content-Type': 'text/plain', 'X-Initial-Header': 'InitialValue' });

Headers 对象与普通对象的区别

Headers 对象提供了专门的方法来操作头部
Headers 对象会自动处理同名多值的情况
Headers 对象会对头部名称进行标准化处理
Headers 对象是可迭代的

Headers 对象的方法

append(name, value) - 添加新的头部

headers.append('X-Additional-Header', 'AdditionalValue');

delete(name) - 删除指定头部

headers.delete('X-Custom-Header');

get(name) - 获取指定头部的值

console.log('Content-Type:', headers.get('Content-Type')); // application/json

has(name) - 检查是否存在指定头部

console.log('Has Authorization:', headers.has('Authorization')); // true

set(name, value) - 设置头部值（会覆盖已有的值）

headers.set('Content-Type', 'application/xml'); console.log('New Content-Type:', headers.get('Content-Type')); // application/xml

forEach(callback) - 遍历所有头部

headers.forEach(function(value, name) { console.log(name + ': ' + value); });

entries() - 返回包含所有键值对的迭代器

for (var entry of headers.entries()) { console.log(entry[0] + ': ' + entry[1]); }

keys() - 返回包含所有键的迭代器

for (var key of headers.keys()) { console.log('Header name:', key); }

values() - 返回包含所有值的迭代器

for (var value of headers.values()) { console.log('Header value:', value); }

在 fetch 请求中使用 Headers 对象

javascript 复制代码

// 在 fetch 请求中使用 Headers 对象
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: new Headers({
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  }),
  body: JSON.stringify({
    title: '使用 Headers 对象',
    body: '这是使用 new Headers() 创建的头部信息',
    userId: 1
  })
})
.then(function(response) {
  console.log('Response headers:');
  // 遍历响应头部
  for (var pair of response.headers.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
  }
  return response.json();
})
.then(function(data) {
  console.log('使用 Headers 的请求结果:', data);
})
.catch(function(error) {
  console.error('请求错误:', error);
});

  
// 普通对象方式（会被自动转换为 Headers 对象）
fetch("https://jsonplaceholder.typicode.com/posts/1", {
  headers: {
    'X-API-Key': 'abcdef12345',
    'Accept': 'application/json'
  }
})
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log('使用普通对象设置头部:', data);
});

HTTP 头部 和 Headers 对象