前端必读：HTTP协议核心知识全景图（二）——请求头详解

西瓜树枝
327 阅读7分钟

一、HTTP 请求头基础：定义与作用

  1. 什么是 HTTP 请求头？
    • 位于请求行之后、请求体之前的键值对集合
    • 格式：Header-Name: value（区分大小写，常规采用首字母大写格式）
  1. 请求头的核心作用
    • 向服务器传递请求的附加信息（如客户端能力、身份、缓存需求等）
    • 指导服务器处理请求的行为（如数据格式、压缩方式等）

二、核心请求头详解（按功能分类）

（一）标识与来源类请求头：告诉服务器 “我是谁”“从哪来”

  1. Host
    • 作用：指定请求的目标服务器域名和端口（HTTP/1.1 强制要求）
    • 示例：Host: www.example.com 或 Host: api.example.com:8080
    • 前端关联：虚拟主机部署的核心依据，跨域请求中不可省略
  1. Origin
    • 作用：标识请求的源站（仅包含协议、域名、端口，不含路径）
    • 示例：Origin: https://www.example.com
    • 前端关联：跨域资源共享（CORS）中服务器判断是否允许请求的关键依据，仅在跨域请求中携带
  1. Referer
    • 作用：记录当前请求的来源页面完整 URL（即 “从哪个页面跳过来的”）
    • 示例：Referer: https://www.example.com/index.html
    • 特殊场景：直接输入 URL 或从 HTTPS 页面跳转到 HTTP 页面时，Referer 可能为空
    • 前端关联：用于进行统计分析、日志记录、缓存优化以及防盗链（结合服务器配置）
    • 防盗链：网站服务器通过检查请求头中的 Referer 字段，判断请求是否来自允许的域名。如果 Referer 属于允许的域名，服务器正常返回资源；如果 Referer 属于未授权的第三方域名（或为空，如直接在浏览器地址栏输入资源 URL），服务器拒绝返回资源（通常返回 403 错误或一张 “防盗链提示图”）。可以在Nginx 里面通过 valid_referers 指令配置允许的来源，再结合 if 语句判断并拦截非法请求，实现防盗链。

（二）缓存控制类请求头：指导服务器 “如何处理缓存”

  1. If-Modified-Since
    • 作用：客户端告知服务器 “上次请求的资源最后修改时间”，用于验证资源是否更新。服务器只在所请求的资源在If-Modified-Since时间之后对内容进行过修改的情况下才会将资源返回，状态码为 200 ；如果请求的资源从那时起未经修改，那么返回一个不带有消息主体的 304 响应。
    • 示例：If-Modified-Since: Tue, 15 Nov 2022 12:00:00 GMT
    • 配合响应头：与服务器返回的Last-Modified联动，实现协商缓存
    • 当与 If-None-Match 一同出现时，If-Modified-Since会被忽略掉，除非服务器不支持 If-None-Match。
  1. If-None-Match
    • 作用：客户端携带上次请求获得的资源唯一标识（ETag），验证资源是否变更
    • 示例：If-None-Match: "abc123"
    • 优势：相比If-Modified-Since，能识别内容未变但修改时间变了的场景（如文件重写）
    • If-None-Match: *：星号是一个特殊值，可以代表任意资源。当使用星号时，仅关注资源是否存在，而非内容是否变更。通常是采用 PUT 方法，来检测拥有相同识别 ID 的资源是否已经上传过了。
  1. If-Match
    • 作用：客户端携带已知的资源唯一标识（ETag），仅当服务器上的资源 ETag 与之一致时，才执行请求（如修改或删除资源）
    • 示例：If-Match: "abc123"
    • 应用场景：用于防止并发修改冲突（如多人同时编辑同一资源时，确保基于最新版本操作），常配合 PUT、DELETE 等请求使用
  1. Cache-Control（请求端指令）
    • 作用：客户端声明对缓存的需求（优先级高于其他缓存头）
    • 常用取值：
      • no-cache：需要向服务器验证缓存有效性后才能使用
      • no-store：不缓存任何请求和响应数据
      • max-age=0：设置缓存存储的最大周期，超过这个时间缓存被认为过期 (单位秒)。与Expires相反，时间是相对于请求的时间。
    • 示例：Cache-Control: no-cache, max-age=0
    • 这里注明请求端指令是因为服务器同样可以在响应中使用Cache-Control指令

（三）内容协商与描述类请求头：告诉服务器 “我要什么格式的数据”

  1. Accept
    • 作用：客户端声明可接受的响应数据格式（MIME 类型），按优先级排序（q值表示权重，默认 1.0）
    • 示例：Accept: application/json, text/html;q=0.9, */*;q=0.8
    • 前端关联：AJAX 请求时通常指定application/json，确保服务器返回 JSON 格式
  1. Accept-Encoding
    • 作用：客户端声明可接受的内容压缩方式，同样采用q值表示权重，默认 1.0
    • 常用取值：gzip、deflate、br（Brotli）
    • 示例：Accept-Encoding: gzip, deflate;q=0.9, br;q=0.8
    • 前端价值：减少传输数据量，提升加载速度（需服务器支持对应压缩）
  1. Accept-Language
    • 作用：客户端声明可接受的自然语言（如中文、英文），同样采用q值表示权重，默认 1.0
    • 示例：Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
    • 应用场景：多语言网站根据该头返回对应语言的内容
  1. Content-Type
    • 作用：描述请求体的数据格式（仅在有请求体时存在，如 POST、PUT 请求）
    • 常见取值：
      • application/x-www-form-urlencoded：表单默认格式（键值对）
      • multipart/form-data：文件上传专用格式
      • application/json：JSON 数据格式（前端 AJAX 常用）
    • 示例：Content-Type: application/json; charset=utf-8
  1. Content-Length
    • 作用：标识请求体的字节长度（服务器用于判断请求是否完整）
    • 示例：Content-Length: 1024

（四）代理与客户端信息类请求头：暴露 “客户端与中间层” 信息

  1. User-Agent（UA）
    • 作用：标识发起请求的客户端软件信息（浏览器、设备、操作系统等）
    • 示例：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
    • 前端关联：服务器可通过 UA 判断客户端类型，返回适配内容（但需注意 UA 可伪造）
  1. Via
    • 作用：记录请求经过的代理服务器信息（类似 “路由轨迹”）
    • 示例：Via: 1.1 proxy1.example.com (Apache/2.4.1)
    • 用途：调试代理问题、追踪请求路径

（五）安全与认证类请求头：保障 “请求的合法性与安全性”

  1. Authorization
    • 作用：携带用户身份验证信息（如 HTTP 基本认证、Bearer Token）
    • 示例：
      • 基本认证：Authorization: Basic dXNlcjpwYXNzd29yZA==（用户名密码 Base64 编码）
      • Token 认证：Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
    • 前端关联：接口权限验证的核心方式，常配合登录逻辑使用
  1. Cookie
    • 作用：携带服务器之前通过Set-Cookie设置的键值对数据（会话管理、身份标识等）
    • 示例：Cookie: sessionId=abc123; username=test
    • 特点：自动携带符合域名和路径规则的 Cookie，受同源策略限制
  1. Upgrade-Insecure-Requests
    • 作用：客户端告知服务器 “希望使用 HTTPS 而非 HTTP”（提升安全性）
    • 示例：Upgrade-Insecure-Requests: 1
    • 应用：服务器可据此自动将 HTTP 请求重定向到 HTTPS

（六）其他常用请求头：特殊场景的 “功能补充”

  1. Range
    • 作用：指定请求资源的部分内容（实现断点续传、分片下载）
    • 示例：Range: bytes=0-499（请求前 500 字节）或 Range: bytes=500-（请求从第 500 字节开始的内容）
    • 配合响应头：服务器返回206 Partial Content及Content-Range
  1. Connection
    • 作用：控制请求连接的状态（HTTP/1.1 默认持久连接），控制网络连接在当前会话完成后是否仍然保持打开状态
    • 常用取值：keep-alive（保持连接）、close（请求后关闭连接）
    • 示例：Connection: keep-alive
    • 在 HTTP/2 和 HTTP/3 中，禁止使用特定于连接的标头字段，如 Connection 和 Keep-Alive。Chrome 和 Firefox 会在 HTTP/2 响应中忽略它们，但 Safari 遵循 HTTP/2 规范要求，不会加载包含这些字段的任何响应。
  1. TE
    • 作用：客户端声明可接受的传输编码方式（如分块传输）
    • 示例：TE: trailers
avatar
文章
阅读
粉丝