网址URL
看懂网络
把项目详情做成可复制的 HTTPS 链接：路径稳定、参数可解释，还不泄露凭据。
https://app.example.com/projects/42#comments项目 42 · 评论区结论：地址栏每一节都有用，复制后直达同一页。
看懂网络
从网址、域名到 HTTP 请求与错误状态，知道页面为什么能打开、为什么会 404，以及该怎样排查。
开发基础
1 个条目部署与上线
3 个条目域名Domain
看懂网络交付上线
shop.example.com 这种地址里，哪段是域名？「/shop」算域名吗？为什么域名还要每年交钱？
shop.example.com线上商店入口今日花束
地址栏里的名字才是域名
结论：域名是给人记的入口名；example.com/shop 的 /shop 是路径，不是域名。
域名解析DNS
看懂网络交付上线
域名买好了，为什么有人能打开店、有人还进旧站？改完解析要等多久？
A → 192.0.2.1TTL 3600 · 浏览器按这个地址开门店
结论：DNS 把名字翻译成地址；改记录后缓存按 TTL 才更新，不是立刻全网生效。
HTTPSHTTPS
看懂网络交付上线
地址栏那把小锁到底锁了什么？为什么证书过期浏览器直接整页拦住，不让登录？
https://app.example.com登录页 · 连接已加密密码在路上是密文
中间人只看到 enc:7f3a…
结论：HTTPS 给连接加上锁和证书；锁坏了浏览器直接红墙，不会把密码发出去。
网络与接口
11 个条目网页通信协议HTTP
看懂网络
“网址开头的 http 到底是什么？前端发的请求和服务器回的响应，到底各长什么样？”
请求消息起始行·头部·空行·主体
GET /users/42 HTTP/1.1Host: api.example.comAccept: application/json
主体（无）
响应消息状态行·头部·空行·主体
HTTP/1.1 200 OKContent-Type: application/jsonContent-Length: 34
主体
{ "id": "42" }一次 HTTP 交换 = 请求 + 响应；每条消息都是「起始行 · 头部 · 空行 · 主体」。
请求Request
接上数据看懂网络
“一个 HTTP 请求到底由什么组成？方法、路径、请求头和请求体是怎么拼成一条可发送的消息的？”
请求行
POST /api/favorites HTTP/1.1请求头
Content-Type: application/jsonAuthorization: Bearer …空行分隔头与体
请求体
{"item_id":"p_7"}请求 = 请求行 + 头 + 空行 + 可选体；方法说意图，路径说目标，头携带元信息。
响应Response
接上数据看懂网络
“接口返回的结果由什么组成？为什么有的 200 带数据，前端却要自己判 success:false 才知道失败？”
状态行
HTTP/1.1 200 OK响应头
Content-Type: application/json空行分隔头与体
响应体
{ data: […], error: null }响应 = 状态行 + 头 + 空行 + 可选体；状态码定语义，2xx 带 data、4xx/5xx 带 error。
HTTP 请求头HTTP Headers
看懂网络
“HTTP 头部不是无意义的键值堆：它是起始行之后、空行之前那一段元信息，请求响应都有；读错一个字段就可能泄密或串缓存。”
起始行之后、空行之前那一段 = 头部；请求和响应都有，装的是元信息，不是主体。
HTTP 状态码Status Code
看懂网络
接口返回的 200、404、500 到底在说什么，前端该按它做什么？
首位 2= 成功类别，客户端继续读取结果
- 首位类别客户端动作
- 1xx信息继续等待
- 2xx成功读取结果
- 3xx重定向跟随或用缓存
- 4xx客户端错修正请求
- 5xx服务端错谨慎重试
陷阱200 只代表请求完成，不等于业务成功；别用 200 把失败塞进响应体。
资源不存在404 Not Found
看懂网络
访问一个链接，服务器返 404——它是说「出错了」「没权限」还是「这东西找不到」？
GET
/users/9999路由✓ 匹配→资源查找∅ 查无此 id→404 Not Found
服务器找不到这个资源 → 前端切到空状态，给返回入口。
不是 5xx 出错 · 不是 403 没权限 · 不是 410 已删除
客户端错误4xx Error
看懂网络
接口返了 4xx，到底是哪里错了、要不要重试、改什么才能过？
HTTP 4xx · 客户端的锅改请求才会过
- 错在哪成员客户端下一步
- 格式 / 参数400 · 422改字段
- 身份 / 权限401 · 403登录 / 无权
- 资源状态404 · 409 · 410空状态 / 换名
- 频率 / 容量429退避重试
重试原样重发还会失败；只有 408 超时、429 限流才退避重试。
服务器错误5xx Error
看懂网络
接口返 500、502、503、504 到底是哪儿坏了，我该重试还是等着？
首位 5= 服务器自己出了问题，请求没错；通常瞬时，退避后重试可能成功。
- 码谁的锅·成因客户端动作
- 500应用未捕获异常确认幂等再重试
- 502网关收到上游无效响应退避后重试
- 503过载·维护·熔断等 Retry-After
- 504网关等上游超时退避后重试
对照看到状态码 = 请求已到达服务端；根本没连上、没收到码 = network-error。
跨域资源共享CORS
看懂网络
「浏览器带着 Origin 提问，服务端用 Access-Control-* 回答；只有浏览器判定允许，网页脚本才能读取跨来源响应。」
BROWSER REQUESTOrigin
https://app.example.comOPTIONS · Access-Control-Request-MethodSERVER RESPONSEAccess-Control-*
Allow-Origin: app.example.comverdict: 匹配 → 脚本可读取网络错误Network Error
看懂网络
请求发出去了但没等到响应：是断网、超时还是被取消？它和 500 是一回事吗？
客户端信号NO HTTP STATUS
离线本机网络DNS / TCP未连到主机超时停止等待取消用户意图
无响应请求未抵达或未返回4xx / 5xx服务器已经回答
先保留输入，再按请求副作用（读 / 写）选择恢复动作。
浏览器 CookieCookie
看懂网络
“Set-Cookie 只是开始：浏览器按主机、路径、HTTPS、同站四道门决定是否自动携带，HttpOnly 只挡脚本读取，Max-Age=0 立即删除。”
账号与安全
2 个条目服务与数据
1 个条目接口API
接上数据看懂网络
前端点保存之后，数据是怎么送到后面、又怎样知道成功还是失败的？
{ "id": 184, "total": 32 }结论：约定好怎么问、怎么答；方法加路径是一次调用，状态码加 JSON 是结果。
定位工具
1 个条目网络面板Network Inspector
看懂网络
页面「没反应」时，我怎么知道是请求没发出、返回错了，还是前端显示错了？
Network3 requests
- POST
/api/login422 - GET
/api/orders503 - GET
/api/profile200
一眼看请求是否发出、返回码与耗时
做完这一步之后
知识点可以反复查；任务则建议按「搭页面 → 交互 → 数据 → AI → 上线 → 协作」推进。