HTTP 与前端网络请求
HTTP/HTTPS, request APIs (XHR/Fetch/Axios), caching, realtime (SSE/WebSocket) and related frontend networking notes.
#type / moc
#status / growing
#tech / network
#platform / browser
#resource / http
[!info] related notes
- 协议总览: http
- 请求选型: frontend-http-requests-xhr-fetch-axios
- 实时通信选型: realtime-communication-sse-websocket-polling
- 计算机网络: computer-networking-moc
- HTTP 语义与传输: HTTP/1.1 vs HTTP/2, HTTP/3
- HTTPS: https, TLS handshake, close_notify
HTTP 与前端网络请求
范围
这张 MOC 覆盖：
- HTTP 语义（资源/表示/方法/状态码/头字段）与版本演进（HTTP/1.1, HTTP/2, HTTP/3）。
- 前端发起请求的 API 与库（AJAX / XHR / Fetch / Axios）。
- 缓存与性能（Cache-Control, ETag, 条件请求等）。
- 实时与流式通信（SSE / WebSocket / Polling / streaming response）。
从哪里开始
- 先建立 HTTP 心智模型：http
- 再补请求 API 选型：frontend-http-requests-xhr-fetch-axios
- 再看实时通信怎么选：realtime-communication-sse-websocket-polling
前端请求 API
- frontend-http-requests-xhr-fetch-axios
- ajax
- xhr
- fetch-api
- axios
- Axios 请求配置
- Axios 实例
- Axios 拦截器
- Axios 响应结构
- Axios 错误模型
- Axios 取消请求
- Axios 数据序列化
HTTP 协议语义与版本
- http
- http语义方法
- HTTP 的状态保存方案
- HttpOnly Cookie - Cookie 禁止脚本读取的安全属性
- cookie-session-token - Cookie、Session、Token
- jwt - JWT 认证凭证格式
- http-status-codes
- HTTP/1.1 vs HTTP/2
- HTTP/3
- HTTP/1.1、HTTP/2、HTTP/3 报文示例
HTTPS 与安全
缓存
- 浏览器缓存体系 - 总入口
- 浏览器缓存分类与 304 / memory cache / disk cache - 分类总览
- 强缓存 - 本地副本直接命中
- 协商缓存 - 过期后向服务器确认
- [[http-cache-storage|浏览器内部缓存存储]] - Memory Cache / Disk Cache
- Service Worker 与 Cache API - 可编程缓存
实时通信与流式
- realtime-communication-sse-websocket-polling
- sse
- web-socket
- polling
- frontend-streaming-data-handling
响应头
- HTTP 响应头 - 总览：消费者模型、9 大类框架、排查顺序
- 内容描述类响应头 - Content-Type / Content-Length / Content-Encoding / Content-Disposition
- 限流响应头 - X-RateLimit-* / Retry-After
- 代理与 CDN 调试响应头 - Server / Via / X-Request-Id / Traceparent
安全响应头
- CSP 内容安全策略 - 防御 XSS 的核心机制
- HSTS 严格传输安全 - 强制 HTTPS
- x-content-type-options - 防 MIME 嗅探
- x-frame-options - 防点击劫持
- referrer-policy - Referer 信息控制
- permissions-policy - 浏览器能力控制
- COOP、COEP 与 CORP 跨源隔离 - cross-origin isolated 环境