HTTP 与前端网络请求

HTTP/HTTPS, request APIs (XHR/Fetch/Axios), caching, realtime (SSE/WebSocket) and related frontend networking notes.

#moc #growing #network #browser #http

[!info] related notes

协议总览: HTTP

请求选型: frontend-http-requests-xhr-fetch-axios

实时通信选型: realtime-communication-sse-websocket-polling

计算机网络: 计算机网络 MOC

HTTP 语义与传输: HTTP/1.1 vs HTTP/2, HTTP/3

HTTPS: https, TLS handshake, close_notify

HTTP 与前端网络请求

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

范围

这张 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

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 - 可编程缓存

实时通信与流式

响应头

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 环境

HTTP 与前端网络请求

HTTP 与前端网络请求

知识总览

范围

从哪里开始

前端请求 API

HTTP 协议语义与版本

HTTPS 与安全

缓存

实时通信与流式

响应头

安全响应头

工程化与排障

键盘导航