JavaScript请求头

JavaScript请求头

请求头（HTTP Headers）是HTTP协议中客户端与服务器通信时传递的元数据信息，用于描述请求或响应的属性、控制缓存机制、认证信息等。在JavaScript网络请求中，通过设置请求头可以精细控制AJAX或Fetch API的行为。本章将详细介绍请求头的核心概念、操作方法及实际应用。

基本概念

HTTP请求头由键值对组成，格式为Header-Name: Header-Value。常见的标准请求头包括：

• Content-Type：指定请求体的MIME类型（如application/json）
• Authorization：携带认证凭证（如Bearer Token）
• User-Agent：标识客户端类型
• Accept：声明可接受的响应格式

请求头的作用

flowchart LR A[客户端] -->|携带请求头| B[服务器] B -->|处理头信息| C[返回定制化响应]

JavaScript中的操作

通过Fetch API设置

// 基础示例
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Custom-Header': 'value123'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data));

关键参数说明：

• headers对象定义所有需要发送的请求头
• 自定义头通常以X-前缀开头（非强制但为约定）

通过XMLHttpRequest设置

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.setRequestHeader('Accept-Language', 'en-US');
xhr.onload = function() {
    console.log(xhr.responseText);
};
xhr.send();

常见请求头详解

标准请求头参考表

头字段	示例值	作用
Accept	application/json	指定客户端理解的响应格式
Content-Type	text/html; charset=utf-8	请求体的媒体类型
Authorization	Bearer abc123...	身份验证凭证
Cache-Control	no-cache	控制缓存行为

实际应用案例

案例1：API身份验证

// 使用JWT进行认证
const token = 'eyJhbGci...';
fetch('/protected-data', {
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    }
});

案例2：内容协商

// 请求特定语言版本的资源
fetch('/document', {
    headers: {
        'Accept-Language': 'fr-CH, fr;q=0.9, en;q=0.8'
    }
});

高级主题

自定义元数据

可通过自定义头传递业务逻辑信息（需确保服务器支持）：

headers: {
    'X-Client-Version': '2.3.0',
    'X-Request-ID': uuidv4()
}

CORS相关头

跨域请求时需要特别注意：

• Origin：自动由浏览器添加
• Access-Control-Request-Headers：预检请求中声明实际请求的头

注意事项

• 敏感信息：避免在请求头中直接传输密码等机密数据
• 大小写不敏感：但惯例使用首字母大写的连字符格式（如Content-Type）
• 头长度限制：不同服务器对$\sum (headersize)$有不同限制（通常8KB以内）

参见

• HTTP协议
• Fetch API
• RESTful API设计