Skip to content

HTTP 协议:前后端的"通信语言"

🎯 核心问题

HTTP 是如何工作的? 这就像问:两个人如何对话?需要约定语言、语法、对话规则。HTTP 就是前后端之间的"对话协议"。


0. HTTP 的本质

HTTP(HyperText Transfer Protocol,超文本传输协议)是前后端通信的基础协议。

0.1 用对话来类比

对话要素HTTP 对应说明
语言HTTP 协议双方都能理解的语言
语法请求/响应格式怎么"说话"
流程请求-响应模式一问一答
结束挂断TCP 连接关闭

1. HTTP 的发展历程

HTTP 从 1991 年诞生至今,经历了多次重大升级。

🌐HTTP 协议演示
📤HTTP 请求
GET/api/users/123HTTP/1.1
Host:api.example.com
User-Agent:Mozilla/5.0
Accept:application/json
Authorization:Bearer xxx
TCP 连接
📥HTTP 响应
HTTP/1.1200OK
Content-Type:application/json
Content-Length:156
Cache-Control:max-age=3600
{ "id": 123, "name": "张三", "email": "zhangsan@example.com" }

1.1 版本对比

版本年份核心改进典型特征
HTTP/0.91991仅支持 GET纯文本,只有请求,无响应头
HTTP/1.01996增加 POST/HEAD每个请求一个 TCP 连接
HTTP/1.11997持久连接Keep-Alive,一个连接多个请求
HTTP/22015多路复用二进制帧,头部压缩
HTTP/32022基于 QUICUDP 传输,解决队头阻塞

💡 为什么需要 HTTP/2?

HTTP/1.1 虽然支持持久连接,但请求必须串行发送(前一个请求的响应返回后,才能发送下一个请求)。HTTP/2 通过多路复用解决了这个问题,可以同时发送多个请求。


2. HTTP 请求的结构

2.1 请求行

http
GET /api/users/123 HTTP/1.1

包含三个部分:

  • 方法:GET、POST、PUT、DELETE 等
  • URL:请求的资源路径
  • 版本:HTTP/1.1 或 HTTP/2

2.2 请求头

http
Host: api.example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer xxx
Content-Type: application/json
Content-Length: 45

常见请求头:

头部说明示例
Host服务器域名api.example.com
User-Agent客户端信息Mozilla/5.0
Accept接受的响应类型application/json
Authorization认证信息Bearer token
Content-Type请求体类型application/json

2.3 请求体

json
{
  "name": "张三",
  "email": "zhangsan@example.com"
}

只有 POST、PUT、PATCH 等方法才有请求体。


3. HTTP 响应的结构

3.1 状态行

http
HTTP/1.1 200 OK

包含三个部分:

  • 版本:HTTP/1.1
  • 状态码:200、404、500 等
  • 状态文本:OK、Not Found 等

3.2 响应头

http
Content-Type: application/json
Content-Length: 156
Cache-Control: max-age=3600
Set-Cookie: session=xxx; HttpOnly

常见响应头:

头部说明示例
Content-Type响应体类型application/json
Content-Length响应体大小156
Cache-Control缓存策略max-age=3600
Set-Cookie设置 Cookiesession=xxx

3.3 响应体

json
{
  "code": 0,
  "data": {
    "id": 123,
    "name": "张三"
  }
}

4. HTTP 方法详解

方法用途请求体幂等性安全性
GET获取资源
POST创建资源
PUT全量更新
PATCH部分更新
DELETE删除资源
HEAD获取头部
OPTIONS查询支持的方法

4.1 GET vs POST

特性GETPOST
参数位置URL 查询参数请求体
缓存可缓存默认不缓存
书签可添加为书签不可
历史记录保存在浏览器历史不保存
数据长度有限制(URL 长度)无限制
安全性参数可见在 URL参数在请求体中

💡 何时使用 GET/POST?

  • GET:查询、获取数据
  • POST:创建、提交数据
  • PUT:全量更新(替换整个资源)
  • PATCH:部分更新(只修改指定字段)
  • DELETE:删除资源

5. HTTP 状态码

5.1 状态码分类

分类说明典型状态码
2xx成功200 OK、201 Created、204 No Content
3xx重定向301 永久、302 临时、304 未修改
4xx客户端错误400 参数错误、401 未认证、404 不存在
5xx服务端错误500 内部错误、503 不可用

5.2 常用状态码

状态码说明使用场景
200 OK请求成功GET、PUT 请求成功
201 Created创建成功POST 创建资源成功
204 No Content无内容DELETE 删除成功
301 Moved Permanently永久重定向URL 永久变更
302 Found临时重定向URL 临时变更
304 Not Modified未修改缓存有效
400 Bad Request参数错误请求参数格式错误
401 Unauthorized未认证需要登录
403 Forbidden无权限已登录但权限不足
404 Not Found不存在资源不存在
500 Internal Server Error内部错误服务器异常
503 Service Unavailable不可用服务器维护或过载

6. HTTPS:安全的 HTTP

6.1 HTTP vs HTTPS

特性HTTPHTTPS
协议TCPTCP + SSL/TLS
端口80443
数据明文传输加密传输
证书不需要需要 SSL 证书
性能略快略慢(握手开销)
SEO无影响搜索引擎优先收录

6.2 HTTPS 的工作流程

  1. Client Hello:客户端发送支持的加密套件
  2. Server Hello:服务器返回证书和选定的加密套件
  3. 验证证书:客户端验证服务器证书的有效性
  4. 密钥交换:使用非对称加密交换会话密钥
  5. 加密通信:使用会话密钥进行对称加密通信

💡 HTTPS 的优势

  • 防窃听:数据加密,第三方无法读取
  • 防篡改:数据完整性校验
  • 防冒充:SSL 证书验证服务器身份

7. HTTP 缓存机制

7.1 缓存头

头部说明示例
Cache-Control缓存策略max-age=3600
ETag资源版本号"33a64df551425fcc"
Last-Modified最后修改时间Wed, 21 Oct 2015 07:28:00 GMT

7.2 缓存策略

强缓存

http
Cache-Control: max-age=3600

在 3600 秒内,浏览器直接使用缓存,不发送请求。

协商缓存

http
ETag: "33a64df551425fcc"

浏览器发送 If-None-Match,服务器返回 304(未修改)或 200(已修改)。


8. 常见问题

8.1 GET 和 POST 的本质区别

误区:GET 和 POST 的区别只是参数位置不同。

真相

  • GET 是幂等的,多次请求结果相同
  • POST 是非幂等的,多次请求可能创建多个资源
  • GET 可被缓存,POST 默认不缓存
  • GET 可被书签保存,POST 不可

8.2 HTTP/1.1 的队头阻塞

问题:HTTP/1.1 虽然支持持久连接,但请求必须串行发送。前一个请求响应慢,后续请求都要等待。

解决方案

  • HTTP/2 多路复用
  • 域名分片(多个域名建立多个连接)
  • 连接池(限制并发数)

8.3 HTTP/2 的优势

特性HTTP/1.1HTTP/2
传输格式文本二进制帧
多路复用不支持支持
头部压缩HPACK 算法
服务器推送不支持支持

名词速查表

名词英文解释
HTTPHyperText Transfer Protocol超文本传输协议
HTTPSHTTP SecureHTTP + SSL/TLS
TCPTransmission Control Protocol传输控制协议
SSL/TLSSecure Sockets Layer安全套接层
幂等性Idempotent多次请求结果相同
持久连接Keep-Alive一个 TCP 连接发送多个请求
多路复用Multiplexing同时发送多个请求
队头阻塞Head-of-Line Blocking前面的请求阻塞后面的请求