HTTP / HTTPS 学习笔记

一句话定位：HTTP 是 Web 的基石——理解 HTTP 就理解了浏览器和服务器之间"怎么说话"。

学习路径：1 HTTP 基础 → 2 请求与响应 → 3 HTTP 方法 → 4 状态码 → 5 HTTP 版本 → 6 HTTPS 与 TLS → 7 Cookie 与 Session → 8 跨域与缓存 → 9 实战调试

怎么用这份笔记

学习/复习 → 顺序看正文，重点看 📌 类比和"为什么"
查状态码 → 翻 第 4 节 速查表
查请求头 → 翻 第 2 节 常用头字段
调试问题 → 看 第 9 节 实战工具

图表在 /HTTP学习笔记/diagrams/ 目录。图注名即原图文件名，看图注就能直接找到原图用 draw.io 编辑。

1 · HTTP 基础

1.1 什么是 HTTP

HTTP（HyperText Transfer Protocol，超文本传输协议）是 Web 通信的基础协议
客户端-服务器模型：浏览器（客户端）发请求，服务器返响应
无状态：每个请求独立，服务器默认不记住"你是谁"（Cookie/Session 弥补）
基于 TCP：HTTP 底层使用 TCP 可靠传输（HTTP/3 改用 UDP + QUIC）

TIP

📌 打个比方：HTTP 像寄信——你写好信封（请求头）和信纸（请求体），交给邮局（TCP），服务器收到后回一封信（响应）。每次寄信都是独立的，邮局不记得你上次寄过什么。

1.2 一次完整的 HTTP 通信

浏览器                                    服务器
  |                                         |
  |  ① DNS 解析：www.example.com → 1.2.3.4  |
  |  ② TCP 三次握手                          |
  |  ------------------------------->       |
  |  ③ TLS 握手（如果是 HTTPS）              |
  |  <------------------------------>       |
  |  ④ 发送 HTTP 请求                        |
  |  GET /index.html HTTP/1.1          -->  |
  |  Host: www.example.com             -->  |
  |                                         |
  |  ⑤ 服务器返回响应                        |
  |  <--  HTTP/1.1 200 OK                   |
  |  <--  Content-Type: text/html           |
  |  <--  <html>...</html>                  |
  |                                         |
  |  ⑥ TCP 四次挥手（或保持连接 keep-alive） |
  |  <------------------------------>       |

TIP

📌 HTTP 通信至少经历 4 步：DNS 解析 → TCP 握手 → HTTP 请求/响应 → TCP 挥手。HTTPS 还多一步 TLS 握手。理解这个流程是排查网络问题的基础。

2 · 请求与响应

$图 1 \xb7 HTTP 请求与响应结构$

2.1 HTTP 请求结构

POST /api/users HTTP/1.1          ← 请求行：方法 路径 协议版本
Host: api.example.com             ← 请求头
Content-Type: application/json
Authorization: Bearer eyJhbG...
Content-Length: 42
                                  ← 空行（CRLF）分隔头和体
{"name": "Alice", "age": 30}      ← 请求体（可选）

请求行三要素：

方法：GET / POST / PUT / DELETE / PATCH / HEAD / OPTIONS
路径：URI（统一资源标识符），如 /api/users?id=1
版本：HTTP/1.1、HTTP/2、HTTP/3

2.2 HTTP 响应结构

HTTP/1.1 200 OK                   ← 状态行：版本 状态码 状态短语
Content-Type: application/json    ← 响应头
Content-Length: 28
Cache-Control: max-age=3600
                                  ← 空行
{"id": 1, "name": "Alice"}        ← 响应体

2.3 常用请求头

请求头	说明	示例
`Host`	目标主机（HTTP/1.1 必须有）	`Host: api.example.com`
`User-Agent`	客户端标识	`Mozilla/5.0 ...`
`Accept`	期望的响应类型	`Accept: application/json`
`Content-Type`	请求体类型	`application/json`
`Content-Length`	请求体字节数	`42`
`Authorization`	认证凭证	`Bearer <token>`
`Cookie`	携带的 Cookie	`session_id=abc123`
`Origin`	请求来源（跨域用）	`https://example.com`
`Referer`	来源页面 URL	`https://google.com`
`Accept-Encoding`	可接受的压缩	`gzip, deflate, br`
`If-None-Match`	缓存校验	`"abc123"`

2.4 常用响应头

响应头	说明	示例
`Content-Type`	响应体类型	`text/html; charset=utf-8`
`Content-Length`	响应体字节数	`1024`
`Cache-Control`	缓存策略	`max-age=3600`
`Set-Cookie`	设置 Cookie	`session=abc; HttpOnly; Secure`
`Location`	重定向目标	`https://example.com/new`
`Access-Control-Allow-Origin`	CORS 跨域允许	`*` 或 `https://example.com`
`ETag`	资源版本标识	`"v3.14"`
`Last-Modified`	资源最后修改时间	`Wed, 21 Oct 2025 07:28:00 GMT`
`Content-Encoding`	压缩方式	`gzip`
`Strict-Transport-Security`	HSTS 强制 HTTPS	`max-age=31536000`

TIP

📌 Content-Type 是最重要的头。它告诉对方"我发的是什么格式"。常见值：application/json、text/html、application/x-www-form-urlencoded、multipart/form-data（文件上传）、text/plain。

3 · HTTP 方法

方法	语义	幂等?	安全?	有请求体?
`GET`	获取资源	是	是	否
`POST`	创建资源	否	否	是
`PUT`	完整替换资源	是	否	是
`PATCH`	部分修改资源	否	否	是
`DELETE`	删除资源	是	否	可选
`HEAD`	只取响应头（不要体）	是	是	否
`OPTIONS`	查询服务器支持的方法	是	是	否

TIP

📌 幂等性：同一个请求执行一次和多次效果相同。GET/PUT/DELETE 幂等，POST/PATCH 不幂等。

为什么重要？网络可能重试请求。幂等方法重试安全，不幂等方法重试可能产生副作用（如重复下单）。设计 API 时要考虑这一点。

RESTful API 设计惯例

GET    /api/users        # 获取用户列表
POST   /api/users        # 创建新用户
GET    /api/users/123    # 获取单个用户
PUT    /api/users/123    # 更新用户（全量）
PATCH  /api/users/123    # 更新用户（部分）
DELETE /api/users/123    # 删除用户

TIP

📌 RESTful 核心：URL 表示资源，HTTP 方法表示操作。URL 是名词，方法是动词。不要写成 /api/createUser（动词在 URL 里）——应该是 POST /api/users（动词在方法里）。

4 · 状态码

$图 2 \xb7 HTTP 状态码分类$

4.1 五大类

类别	范围	语义
1xx	100-199	信息性（很少用）
2xx	200-299	成功
3xx	300-399	重定向
4xx	400-499	客户端错误
5xx	500-599	服务器错误

4.2 常见状态码速查

状态码	短语	说明
200	OK	请求成功
201	Created	资源创建成功（POST 常用）
204	No Content	成功但无返回体（DELETE 常用）
301	Moved Permanently	永久重定向（浏览器缓存）
302	Found	临时重定向
304	Not Modified	资源未修改，用缓存
400	Bad Request	请求格式错误（参数不对）
401	Unauthorized	未认证（没登录/没带 token）
403	Forbidden	已认证但无权限
404	Not Found	资源不存在
405	Method Not Allowed	方法不允许（如对只读资源 POST）
409	Conflict	冲突（如重复创建）
413	Payload Too Large	请求体太大
429	Too Many Requests	请求频率超限（限流）
500	Internal Server Error	服务器内部错误
502	Bad Gateway	网关错误（上游服务挂了）
503	Service Unavailable	服务不可用（维护中/过载）
504	Gateway Timeout	网关超时（上游响应超时）

TIP

📌 401 vs 403：401 是"你是谁？"（没认证），403 是"我知道你是谁，但你不能做这个"（没权限）。

301 vs 302：301 永久重定向——浏览器会缓存，下次直接跳新地址。302 临时重定向——每次都先访问旧地址再跳。SEO 用 301 传递权重，临时跳转用 302。

5 · HTTP 版本演进

$图 3 \xb7 HTTP 版本对比$

5.1 HTTP/0.9（1991）

只支持 GET
只能返回 HTML
无状态码、无请求头

5.2 HTTP/1.0（1996）

增加 POST、HEAD
增加请求头/响应头、状态码
每个请求新建 TCP 连接（短连接）

5.3 HTTP/1.1（1997）—— 最广泛使用

持久连接（Connection: keep-alive）：多个请求复用一个 TCP 连接
管道化：可以连续发多个请求不等响应（但响应必须按序，有队头阻塞）
Host 头：支持虚拟主机（一个 IP 多个域名）
新增 PUT、DELETE、PATCH、OPTIONS
队头阻塞（HOL Blocking）：一个慢请求会阻塞后面的响应

TIP

📌 HTTP/1.1 队头阻塞：虽然管道化可以连续发请求，但响应必须按顺序返回。如果第一个请求处理慢，后面的请求即使处理完了也得等。浏览器解决方案：对同一域名开 6 个并发连接。

5.4 HTTP/2（2015）

二进制分帧：不再是人类可读的文本，改为二进制
多路复用：一个 TCP 连接上并行多个请求/响应，无队头阻塞
头部压缩：HPACK 算法压缩重复的请求头
服务器推送：服务器可以主动推送资源（如 CSS/JS）
流优先级：可以指定哪些资源更重要

TIP

📌 HTTP/2 多路复用解决了 HTTP/1.1 的队头阻塞——多个请求并行处理，互不等待。但 HTTP/2 仍有 TCP 层队头阻塞：如果 TCP 包丢失，所有流都要等重传。

5.5 HTTP/3（2022）—— 基于 QUIC

底层改用 UDP + QUIC（不再用 TCP）
无 TCP 队头阻塞：包丢失只影响对应的流
更快的连接建立：TLS 1.3 握手合并进 QUIC 握手，1-RTT 甚至 0-RTT
连接迁移：切换网络（如 WiFi→4G）不断连接

TIP

📌 HTTP/3 为什么用 UDP？TCP 是操作系统内核实现的，更新慢。QUIC 在 UDP 上自己实现可靠传输，可以快速迭代。而且 TCP 的队头阻塞是内核级的，应用层无法解决。QUIC 在应用层解决，一个流丢包不影响其他流。

5.6 版本对比表

特性	HTTP/1.0	HTTP/1.1	HTTP/2	HTTP/3
传输层	TCP	TCP	TCP	UDP(QUIC)
连接	短连接	持久连接	多路复用	多路复用
格式	文本	文本	二进制	二进制
队头阻塞	有	有(HTTP层)	有(TCP层)	无
头部压缩	否	否	HPACK	QPACK
服务器推送	否	否	是	是

6 · HTTPS 与 TLS

$图 4 \xb7 HTTPS 与 TLS 握手过程$

6.1 什么是 HTTPS

HTTPS = HTTP + TLS/SSL：在 HTTP 和 TCP 之间加一层加密
三个目标：
- 加密（保密性）：数据被截获也看不懂
- 认证（真实性）：确认服务器是它声称的那个
- 完整性：数据在传输中不被篡改

TIP

📌 打个比方：HTTP 像明信片——邮递员（中间人）能看到内容。HTTPS 像密封信封——只有收件人有钥匙能打开。而且信封上有防伪封条（证书），确认是本人寄的。

6.2 TLS 握手过程（TLS 1.2）

客户端                                     服务器
  |                                          |
  |  ① Client Hello                          |
  |  支持的 TLS 版本、加密套件、随机数    --> |
  |                                          |
  |  ② Server Hello + 证书                   |
  |  <-- 选定的加密套件、随机数、服务器证书    |
  |                                          |
  |  ③ 验证证书                              |
  |  用 CA 公钥验证服务器证书是否可信          |
  |                                          |
  |  ④ 生成预主密钥                          |
  |  用服务器公钥加密预主密钥            -->  |
  |                                          |
  |  ⑤ 双方用三个随机数生成会话密钥           |
  |                                          |
  |  ⑥ 加密通信开始                          |
  |  <---- 用会话密钥加密的 HTTP 数据 ---->   |

TIP

📌 为什么需要三个随机数？客户端随机数 + 服务器随机数 + 预主密钥 → 生成会话密钥。三个随机数保证每次连接的密钥不同，即使有人记录了所有加密流量，也无法复现密钥。

6.3 TLS 1.3（2018）改进

1-RTT 握手：比 TLS 1.2 的 2-RTT 快一倍
0-RTT 恢复：重连时第一个请求就能带数据
删除不安全算法：只保留 AEAD 加密（AES-GCM、ChaCha20-Poly1305）
前向保密：即使服务器私钥泄露，旧的加密流量也无法解密

6.4 数字证书与 CA

证书内容：
  - 颁发者（CA）
  - 持有者（域名）
  - 公钥
  - 有效期
  - CA 的数字签名

信任链：
  根 CA → 中间 CA → 网站证书
  浏览器内置根 CA 证书 → 验证中间 CA → 验证网站证书

TIP

📌 证书的本质：CA（证书颁发机构）用私钥给网站证书签名，浏览器用 CA 公钥验证签名。信任 CA = 信任 CA 签名的所有证书。Let's Encrypt 提供免费证书，是当下最流行的 CA。

6.5 对称加密 vs 非对称加密

维度	对称加密	非对称加密
密钥	加密解密同一把	公钥加密，私钥解密
速度	快	慢（约 100-1000x）
用途	大量数据加密	密钥交换、数字签名
TLS 中的角色	会话密钥加密 HTTP 数据	握手阶段交换会话密钥

TIP

📌 HTTPS 用了两者的组合：非对称加密安全但慢，用来交换会话密钥；对称加密快但需要共享密钥，用交换来的会话密钥加密实际数据。各取所长。

7.1 Cookie——客户端状态

# 服务器通过响应头设置 Cookie
Set-Cookie: session_id=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600

# 浏览器后续请求自动携带
Cookie: session_id=abc123

Cookie 属性：

属性	说明
`Domain`	Cookie 适用的域名
`Path`	Cookie 适用的路径
`Max-Age` / `Expires`	过期时间
`HttpOnly`	JS 不能访问（防 XSS）
`Secure`	只在 HTTPS 下发送
`SameSite`	跨站发送策略（`Strict`/`Lax`/`None`）

TIP

📌 HttpOnly + Secure + SameSite 是 Cookie 安全三件套。HttpOnly 防 XSS 偷 Cookie，Secure 防中间人窃听，SameSite 防 CSRF 跨站请求伪造。

7.2 Session——服务器端状态

① 客户端登录 → 服务器验证通过
② 服务器创建 Session，存入内存/Redis，生成 session_id
③ 服务器通过 Set-Cookie 返回 session_id
④ 客户端后续请求携带 session_id
⑤ 服务器根据 session_id 查找 Session 数据

维度	Cookie	Session	Token (JWT)
存储位置	浏览器	服务器	客户端
大小限制	~4KB	无限制	~4KB
服务器开销	无	需存储	无（签名验证）
扩展性	好	差（需共享 Session）	好
失效控制	浏览器删	服务器删	自然过期
适用场景	简单状态	传统 Web 登录	API 认证、微服务

TIP

📌 JWT 的优势：服务器不需要存储 Session——Token 自包含用户信息+签名，服务器只验证签名。适合微服务/分布式场景。缺点：签发后无法主动撤销（除非维护黑名单）。

8 · 跨域与缓存

8.1 同源策略与 CORS

同源：协议 + 域名 + 端口三者相同。

https://example.com/page  ← 源
https://example.com/api   ← 同源
http://example.com/api    ← 不同协议
https://api.example.com   ← 不同域名
https://example.com:8080  ← 不同端口

CORS（跨域资源共享）：

# 预检请求（OPTIONS）
OPTIONS /api/data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT

# 预检响应
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 3600

TIP

📌 CORS 是浏览器行为，不是服务器限制。服务器正常处理请求并返回，是浏览器检查响应头决定是否让 JS 读取。curl 不受 CORS 限制。

简单请求（GET/POST + 简单头）不需要预检。复杂请求（PUT/DELETE/自定义头）先发 OPTIONS 预检。

8.2 HTTP 缓存

$图 5 \xb7 HTTP 缓存机制$

强缓存（不发请求，直接用本地副本）：

Cache-Control: max-age=3600    # 缓存 3600 秒
Cache-Control: no-cache         # 每次必须验证（不是不缓存！）
Cache-Control: no-store         # 完全不缓存
Cache-Control: public           # 允许 CDN 缓存
Cache-Control: private          # 只允许浏览器缓存

协商缓存（发请求验证，没改用 304）：

# 第一次响应
ETag: "abc123"
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT

# 第二次请求
If-None-Match: "abc123"
If-Modified-Since: Wed, 21 Oct 2025 07:28:00 GMT

# 服务器判断未修改
HTTP/1.1 304 Not Modified    # 不返回 body，省带宽

TIP

📌 缓存优先级：Cache-Control > Expires。ETag > Last-Modified（ETag 更精确，基于内容哈希）。

no-cache 不是不缓存！它的意思是"可以缓存，但每次用之前必须向服务器验证"。真正不缓存用 no-store。

9 · 实战调试

9.1 curl 常用命令

# GET 请求
curl https://api.example.com/users

# 带请求头
curl -H "Authorization: Bearer token123" https://api.example.com/users

# POST JSON
curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name": "Alice", "age": 30}'

# 只看响应头
curl -I https://example.com

# 显示完整请求和响应（调试用）
curl -v https://example.com

# 跟随重定向
curl -L https://example.com/redirect

# 下载文件
curl -o file.zip https://example.com/file.zip

# 忽略证书验证（调试自签名证书）
curl -k https://localhost:8443/api

9.2 浏览器开发者工具

Network 面板：查看所有请求/响应的详情
Filter：按类型过滤（XHR/Fetch、JS、CSS、Img）
Timing：查看 DNS/TLS/TTFB/Content 各阶段耗时
Disable cache：勾选后禁用缓存（调试时必开）
Copy as cURL：右键请求 → 复制为 curl 命令

9.3 常见问题排查

现象	可能原因	排查方法
页面空白	JS 报错 / 跨域	Console + Network 面板
401	未登录 / Token 过期	检查 Authorization 头
403	权限不足 / CORS	检查 CORS 响应头
404	路径错误 / 资源未部署	确认 URL 路径
502/504	服务器挂了 / 超时	检查后端服务状态
慢	DNS/TLS/大文件	Network Timing 面板
乱码	Content-Type charset 不对	检查 Content-Type 头
CORS 报错	跨域未配置	检查 Access-Control-Allow-* 头

9.4 安全头最佳实践

# 强制 HTTPS
Strict-Transport-Security: max-age=31536000; includeSubDomains

# 防止 MIME 嗅探
X-Content-Type-Options: nosniff

# 防 XSS（现代浏览器用 CSP 更好）
X-XSS-Protection: 1; mode=block

# 内容安全策略
Content-Security-Policy: default-src 'self'; script-src 'self' cdn.example.com

# 控制 Referrer 泄露
Referrer-Policy: strict-origin-when-cross-origin

# 防止点击劫持
X-Frame-Options: DENY

TIP

📌 安全头是"免费"的安全加固——只需在服务器/CDN 配置响应头，不需要改代码。用 securityheaders.com 扫描你的网站评级。

附录 · HTTP 速查卡

Content-Type 常见值

Content-Type	用途
`text/html`	HTML 页面
`text/plain`	纯文本
`application/json`	JSON API
`application/x-www-form-urlencoded`	表单提交（默认）
`multipart/form-data`	文件上传
`application/octet-stream`	二进制流（下载）
`image/png` / `image/jpeg`	图片
`application/xml`	XML 数据

curl 速查

curl -X METHOD URL -H "Header: value" -d "body"
# -X  指定方法
# -H  添加请求头
# -d  请求体（自动设 Content-Type: application/x-www-form-urlencoded）
# -v  显示详细信息
# -I  只看响应头
# -L  跟随重定向
# -k  忽略证书
# -o  输出到文件
# -w  自定义输出格式

本页目录

HTTP / HTTPS 学习笔记#

怎么用这份笔记#

1 · HTTP 基础#

1.1 什么是 HTTP#

1.2 一次完整的 HTTP 通信#

2 · 请求与响应#

2.1 HTTP 请求结构#

2.2 HTTP 响应结构#

2.3 常用请求头#

2.4 常用响应头#

3 · HTTP 方法#

RESTful API 设计惯例#

4 · 状态码#

4.1 五大类#

4.2 常见状态码速查#

5 · HTTP 版本演进#

5.1 HTTP/0.9（1991）#

5.2 HTTP/1.0（1996）#

5.3 HTTP/1.1（1997）—— 最广泛使用#

5.4 HTTP/2（2015）#

5.5 HTTP/3（2022）—— 基于 QUIC#

5.6 版本对比表#

6 · HTTPS 与 TLS#

6.1 什么是 HTTPS#

6.2 TLS 握手过程（TLS 1.2）#

6.3 TLS 1.3（2018）改进#

6.4 数字证书与 CA#

6.5 对称加密 vs 非对称加密#

7 · Cookie 与 Session#

7.1 Cookie——客户端状态#

7.2 Session——服务器端状态#

7.3 Cookie vs Session vs Token#

8 · 跨域与缓存#

8.1 同源策略与 CORS#

8.2 HTTP 缓存#

9 · 实战调试#

9.1 curl 常用命令#

9.2 浏览器开发者工具#

9.3 常见问题排查#

9.4 安全头最佳实践#

附录 · HTTP 速查卡#

Content-Type 常见值#

curl 速查#