HTTP 基础与浏览器交互（零基础详细版）

目标：理解 HTTP 请求/响应的组成，能用浏览器 F12、Postman、curl 构造与调试请求。

← 返回一级入口

学习目标与前置

建议用时：60 分钟准备：Chrome/Edge，Postman 或 Thunder Client

知道请求行/方法/路径/协议版本，理解幂等性。
掌握常见状态码和基础 Header。
能用 F12/ Postman/ curl 发送 GET/POST JSON，请求带 Cookie。

核心概念

请求行：METHOD URL HTTP/1.1（方法、路径、协议版本）。
常见方法：GET（查，幂等）、POST（增，非幂等）、PUT（改，幂等）、DELETE（删，幂等）。
状态码：200 成功；302 重定向；400/404 客户端错误；500 服务器错误。
常用 Header：Content-Type（正文类型）、Accept（期望返回类型）、Authorization（认证）、Cookie（会话标识）。
Cookie vs Session：Cookie 存浏览器；Session 存服务器，SessionID 通过 Cookie 关联。

工具准备

浏览器 F12：Network 面板查看请求/响应头、预览、时间轴。
Postman/Thunder Client：可视化构造请求，保存用例。
curl：命令行发请求，便于脚本化与快速验证。

操作步骤（从易到难）

flowchart LR
  A[浏览器/Postman/curl] --> B[HTTP 请求: 方法 + URL + Header + Body]
  B --> C[服务器处理]
  C --> D[HTTP 响应: 状态码 + Header + Body]
  D --> E[浏览器 F12/工具查看结果]

步骤 1：浏览器 F12 观察真实请求

打开 https://httpbin.org，按 F12 → Network。
刷新页面，点击任意请求，查看 Request Headers、Response Headers、Preview。
重点认：方法、URL、状态码、Content-Type、Cookie、响应体。

步骤 2：用 curl 构造请求

# GET 并查看响应头
curl -i https://httpbin.org/get

# POST JSON
curl -i -X POST https://httpbin.org/post \
  -H "Content-Type: application/json" \
  -d "{\"title\":\"hello\",\"done\":false}"

# 自定义 Header
curl -i https://httpbin.org/headers -H "X-Demo: hello"

参数说明：-i 显示响应头；-X 方法；-H 头；-d 正文。

步骤 3：Postman/Thunder Client 调试

新建请求：POST https://httpbin.org/post。
Body 选择 raw + JSON，填 {"title":"demo","done":false}。
发送后查看 Status、Headers、Body；切换为 GET，观察幂等性（重复请求无副作用）。

步骤 4：Cookie 简单示例

# 服务器写入 Cookie
curl -i https://httpbin.org/cookies/set?token=abc123
# 客户端携带 Cookie 访问
curl -i --cookie "token=abc123" https://httpbin.org/cookies

说明：服务端通过 Set-Cookie 写入；下次请求客户端在 Cookie 头携带，用于会话标识。

常见问题与排查

400 Bad Request：检查方法、路径、参数格式，Content-Type 是否与正文一致。
401 Unauthorized：缺少认证信息；补充 Authorization 或 Cookie。
404 Not Found：路径错误或资源不存在；确认 URL。
500 Server Error：服务器内部异常；查看响应体或后端日志。

课堂练习

用 Postman 调用 https://api.github.com/users/octocat，截图请求与响应。
用 curl 向 httpbin 发送自定义 Header：X-Demo: hello，截图响应。
写出 200、302、404 的含义及各自一个示例场景。

课后巩固

整理 5 个状态码及含义，附 1 个请求/响应截图。
保存 3 条命令：GET、POST JSON、带 Cookie，并写下输出。
用 curl 模拟 2 次 GET、2 次 POST，观察幂等与非幂等差异。

教学提示

演示时放大终端/浏览器字体，方便跟读。
网络不稳可预录 F12/Postman 操作视频备用。
反复强调“请求/响应”模型和方法幂等性，为后续框架学习打基础。