编辑“︁JavaScript请求头”︁

= JavaScript请求头 =

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

== 基本概念 ==
HTTP请求头由键值对组成，格式为<code>Header-Name: Header-Value</code>。常见的标准请求头包括：
* <code>Content-Type</code>：指定请求体的MIME类型（如<code>application/json</code>）
* <code>Authorization</code>：携带认证凭证（如Bearer Token）
* <code>User-Agent</code>：标识客户端类型
* <code>Accept</code>：声明可接受的响应格式

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

== JavaScript中的操作 ==
=== 通过Fetch API设置 ===
<syntaxhighlight lang="javascript">
// 基础示例
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));
</syntaxhighlight>

'''关键参数说明：'''
* <code>headers</code>对象定义所有需要发送的请求头
* 自定义头通常以<code>X-</code>前缀开头（非强制但为约定）

=== 通过XMLHttpRequest设置 ===
<syntaxhighlight lang="javascript">
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();
</syntaxhighlight>

== 常见请求头详解 ==
{| class="wikitable"
|+ 标准请求头参考表
! 头字段 !! 示例值 !! 作用
|-
| <code>Accept</code> || <code>application/json</code> || 指定客户端理解的响应格式
|-
| <code>Content-Type</code> || <code>text/html; charset=utf-8</code> || 请求体的媒体类型
|-
| <code>Authorization</code> || <code>Bearer abc123...</code> || 身份验证凭证
|-
| <code>Cache-Control</code> || <code>no-cache</code> || 控制缓存行为
|}

== 实际应用案例 ==
=== 案例1：API身份验证 ===
<syntaxhighlight lang="javascript">
// 使用JWT进行认证
const token = 'eyJhbGci...';
fetch('/protected-data', {
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    }
});
</syntaxhighlight>

=== 案例2：内容协商 ===
<syntaxhighlight lang="javascript">
// 请求特定语言版本的资源
fetch('/document', {
    headers: {
        'Accept-Language': 'fr-CH, fr;q=0.9, en;q=0.8'
    }
});
</syntaxhighlight>

== 高级主题 ==
=== 自定义元数据 ===
可通过自定义头传递业务逻辑信息（需确保服务器支持）：
<syntaxhighlight lang="javascript">
headers: {
    'X-Client-Version': '2.3.0',
    'X-Request-ID': uuidv4()
}
</syntaxhighlight>

=== CORS相关头 ===
跨域请求时需要特别注意：
* <code>Origin</code>：自动由浏览器添加
* <code>Access-Control-Request-Headers</code>：预检请求中声明实际请求的头

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

== 参见 ==
* [[HTTP协议]]
* [[Fetch API]]
* [[RESTful API设计]]

<noinclude>
[[Category:JavaScript网络请求]]
</noinclude>

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript网络请求]]