深入理解请求头---基础入门

什么是请求头

简单来说，请求头是客户端向服务器发送HTTP请求时附带的额外信息。这些信息以键值对的形式呈现，就像是一份详细的清单，告诉服务器关于请求的各种细节。例如，它可以表明客户端的类型（是浏览器、移动应用还是其他程序）、支持的数据格式、使用的语言偏好等。请求头就像是一封邮件的信封，除了收件人地址（URL）外，还包含了发件人信息、邮件优先级等其他重要内容。

请求头的作用

标识客户端

User - Agent字段是请求头中用于标识客户端的重要部分。它会详细说明客户端使用的操作系统（如Windows、MacOS、iOS、Android）、浏览器类型（如Chrome、Firefox、Safari）以及它们的版本号。服务器可以根据这些信息，为不同的客户端提供针对性的内容展示或功能支持。例如，移动设备上的页面布局可能与桌面电脑有所不同，服务器通过User - Agent识别后，就能发送适合移动设备的页面代码。

数据格式协商

Accept字段用于告知服务器客户端能够接受的数据格式。常见的格式包括text/html（网页）、application/json（常用于API数据交互）、application/xml等。服务器根据这个字段，选择合适的格式来响应数据，确保客户端能够正确解析和处理接收到的信息。例如，当你使用一个专门请求JSON数据的API客户端时，请求头中的Accept: application/json会让服务器知道要返回JSON格式的数据，而不是HTML页面。

语言偏好设置

Accept - Language字段允许客户端指定其偏好的语言。这对于多语言网站或应用非常重要。服务器可以根据这个字段，返回客户端用户期望语言的内容。比如，一位设置语言偏好为中文的用户访问一个国际网站时，服务器如果支持多语言，就会优先返回中文版本的页面内容。

缓存控制

请求头中的Cache - Control字段可以影响服务器和客户端对缓存的处理方式。例如，设置Cache - Control: no - cache可以让客户端不使用本地缓存，每次都向服务器请求最新的数据；而设置Cache - Control: max - age = 3600则表示缓存有效期为3600秒，在这个时间内，客户端可以直接从本地缓存获取数据，减少对服务器的请求压力。

安全相关作用

Authorization字段：这是用于身份验证的重要请求头字段。当用户需要访问受保护的资源时，客户端会在请求头中添加Authorization字段，并附带相应的身份验证凭据，常见的方式有基本认证（Basic Authentication）、Bearer令牌（如在OAuth 2.0中）等。例如，在使用Bearer令牌时，请求头可能是Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c，服务器通过验证这个令牌来确认用户是否有权限访问请求的资源，保障了资源的安全性。

Content - Security - Policy（CSP）相关请求头：虽然CSP主要是通过响应头发送给客户端来控制客户端资源加载的安全策略，但在一些情况下，客户端也可能在请求头中发送相关信息来参与安全协商。例如，客户端可以通过发送Content - Security - Policy - Report - Only请求头，告诉服务器它希望接收违反CSP规则的报告，而不实际执行CSP策略。这在开发和测试阶段，有助于发现潜在的安全风险，例如页面中是否存在从非安全源加载脚本或样式表的情况，从而及时进行修复，提升网站的整体安全性。

常见的请求头字段

User - Agent

前面已经详细介绍过，它是识别客户端的关键信息。例如：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36。

Accept

指定客户端可接受的响应内容类型。如Accept: text/html,application/xhtml + xml,application/xml;q = 0.9,image/avif,image/webp,image/apng,/;q = 0.8,application/signed - exchange;v = b3;q = 0.7。这里的q值表示权重，数值越高，优先级越高。

Accept - Language

声明客户端的语言偏好。例如Accept - Language: zh - CN,zh;q = 0.9,en;q = 0.8。

Cache - Control

控制缓存策略。除了前面提到的no - cache和max - age，还有public（表示响应可以被任何缓存存储）、private（表示响应只能被客户端缓存，不能被中间代理缓存）等取值。

Referer

这个字段会告诉服务器当前请求是从哪个页面发起的。这在一些需要跟踪用户来源、防止盗链等场景中非常有用。例如，如果你从A网站的某个页面点击链接跳转到B网站，B网站的服务器在接收到请求时，Referer字段的值就是A网站那个页面的URL。

Cookie

用于在客户端和服务器之间传递会话信息。当用户登录一个网站后，服务器会生成一个唯一的会话标识（通常是一个加密字符串），并通过Set - Cookie响应头发送给客户端。客户端下次请求时，会将这个Cookie包含在请求头中发送回服务器，服务器通过验证Cookie来识别用户身份，维持会话状态。

Content - Type

该字段用于指示请求体的媒体类型。在向服务器发送数据时（比如通过POST或PUT请求提交表单数据、JSON数据等），需要明确告知服务器数据的类型。例如，当提交一个JSON格式的用户注册信息时，请求头中的Content - Type: application/json会让服务器知道如何正确解析请求体中的数据。如果是提交普通的表单数据，则Content - Type通常为application/x - www - form - urlencoded。

X - Forwarded - For（XFF）

在使用代理服务器的场景中，这个字段非常重要。当客户端的请求经过代理服务器转发时，代理服务器会在请求头中添加X - Forwarded - For字段，并将客户端的真实IP地址记录在其中。例如，如果客户端的IP是192.168.1.1，请求经过代理服务器后，服务器接收到的请求头中X - Forwarded - For: 192.168.1.1。这使得服务器能够获取到客户端的原始IP地址，对于分析用户地理位置、进行访问控制等操作具有重要意义。

代码示例

使用fetch设置请求头

设置Content - Type头发送JSON数据

const url = 'https://example.com/api/register';
const data = {
    username: 'JohnDoe',
    email: 'johndoe@example.com'
};
const headers = new Headers();
headers.append('Content - Type', 'application/json');
fetch(url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.error('Error:', error));

在这段JavaScript代码中，我们使用fetch API向https://example.com/api/register发送一个POST请求。通过创建一个Headers对象并添加Content - Type: application/json，我们告诉服务器请求体中的数据是JSON格式的。然后将JSON字符串化的数据作为请求体发送。

设置Cache - Control头

const url = 'https://example.com/some - static - content';
const headers = new Headers();
headers.append('Cache - Control', 'no - cache');
fetch(url, {
    method: 'GET',
    headers: headers
})
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.error('Error:', error));

这里通过设置Cache - Control: no - cache头，我们确保每次请求https://example.com/some - static - content时，浏览器不会使用本地缓存，而是直接从服务器获取最新数据。

设置Authorization头进行身份验证

const url = 'https://protected - api.com/data';
const token = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
const headers = new Headers();
headers.append('Authorization', token);
fetch(url, {
    method: 'GET',
    headers: headers
})
.then(response => {
    if (response.ok) {
        return response.json();
    }
    throw new Error('Request failed');
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

此代码展示了如何在请求头中设置Authorization字段，使用Bearer令牌来访问受保护的API。通过验证令牌，服务器确认请求的合法性并返回相应的数据。

使用Axios库设置多种请求头

Axios是一个流行的JavaScript库，用于在浏览器和Node.js中发送HTTP请求，它提供了简洁的方式来设置请求头。

import axios from 'axios';

const url = 'https://example.com/api/data';
const headers = {
    'User - Agent': 'CustomApp/1.0',
    'Accept': 'application/vnd.example.v1+json',
    'Authorization': 'Bearer your - token - here'
};

axios.get(url, { headers })
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

在这个例子中，我们使用Axios发送一个GET请求，并设置了User - Agent来自定义客户端标识，Accept来指定期望的数据格式版本，以及Authorization头进行身份验证。Axios会自动处理请求头的设置和请求的发送，使得代码更加简洁易读。

在SPA（单页应用）中设置请求头进行多语言切换

假设我们有一个单页应用，需要根据用户选择的语言切换请求头中的Accept - Language字段来获取不同语言的内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>Multi - Language SPA</title>
</head>

<body>
    <select id="languageSelector">
        <option value="en">English</option>
        <option value="zh - CN">Chinese (Simplified)</option>
    </select>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="content"></div>
    <script>
        function fetchData() {
            const lang = document.getElementById('languageSelector').value;
            const url = 'https://example.com/api/content';
            const headers = new Headers();
            headers.append('Accept - Language', lang);
            fetch(url, { headers })
              .then(response => response.json())
              .then(data => {
                    document.getElementById('content').innerText = data.text;
                })
              .catch(error => console.error('Error:', error));
        }
    </script>
</body>

</html>

在这段代码中，当用户在下拉菜单中选择语言并点击按钮时，fetchData函数会被调用。该函数根据用户选择的语言设置Accept - Language请求头，然后向服务器发送请求获取对应语言的内容，并将其显示在页面上。这展示了如何在JavaScript驱动的单页应用中动态地根据用户操作设置请求头。

如何查看请求头

在浏览器中

大多数现代浏览器都提供了查看请求头的工具。以Chrome浏览器为例，打开开发者工具（快捷键通常是F12），在Network标签页中，当你刷新页面或进行其他网络请求时，会列出所有的请求。点击某个请求，在右侧的Headers选项卡中，你可以看到Request Headers部分，这里展示了浏览器发送的完整请求头信息。

使用工具

像Postman这样的API测试工具，在发送请求时，不仅可以方便地自定义请求头，还能清晰地查看发送和接收的请求头与响应头信息。这对于开发和调试API非常有帮助。此外，还有一些专门的网络抓包工具，如Wireshark，它可以捕获网络数据包，详细展示包括请求头在内的所有网络通信细节。在复杂的网络环境排查问题或进行网络协议分析时，Wireshark能发挥强大的作用，开发人员可以通过它深入了解请求头在网络传输过程中的变化和交互情况。