http核心知识
什么是http?
HTTP 是基于 TCP/IP 的应用层协议，用于客户端（浏览器）和服务器之间传输超文本（HTML、JSON 等），默认端口 80，HTTPS 默认 443。
http 核心
特征
- 无状态：服务器不记住客户端身份，每次请求独立（解决：Cookie/Session/Token）
- 无连接：HTTP1.0 默认一次请求对应一次 TCP 连接，请求完断开（HTTP1.1 支持长连接 keep-alive）
- 明文传输：数据不加密，抓包可看（安全风险：HTTPS=HTTP+TLS 加密传输）
- 灵活可扩展：支持自定义请求头 / 响应头、多种数据格式（JSON/Form/ 二进制）
通信模型
- 客户端向服务器发送请求（request）
- 服务器接收请求，做出响应(response)
- 客服端接收响应，渲染页面/处理数据
提示
必须客户端先发起，服务器不能主动给客户端发数据（想主动用 WebSocket）
报文结构
HTTP 传输的核心是「报文」，本质是格式化的文本，分请求报文和响应报文，结构固定，抓包（F12-Network）能直接看到
请求报文
共 4 部分，顺序固定：请求行 → 请求头 → 空行 → 请求体
// 示例（GET请求，无请求体）
GET /api/user HTTP/1.1 // 请求行
Host: www.xxx.com // 请求头
User-Agent: Chrome/120 // 请求头
Accept: application/json // 请求头
// 空行（必须有，分隔头和体）
// POST请求（有请求体）
POST /api/login HTTP/1.1
Host: www.xxx.com
Content-Type: application/json
Content-Length: 32
{"username":"test","password":"123456"} // 请求体- 请求行：3 个核心要素 请求方法 + 请求路径 + HTTP版本
- 请求头：键值对，描述请求的附加信息（如目标地址、数据格式、浏览器信息）
- 空行：必须存在，告诉服务器「请求头结束了」
- 请求体：仅 POST/PUT 等方法有，存放要传给服务器的核心数据（JSON / 表单 / 文件）
响应报文
同样 4 部分，顺序固定：状态行 → 响应头 → 空行 → 响应体
// 示例
HTTP/1.1 200 OK // 状态行
Server: Nginx // 响应头
Content-Type: application/json
Content-Length: 28
{"code":200,"msg":"success","data":{}} // 响应体- 状态行：3 个核心要素 HTTP版本 + 状态码 + 状态描述
- 响应头：键值对，描述服务器信息、响应数据格式、缓存规则等
- 空行：同上，分隔响应头和响应体
- 响应体：服务器返回的核心数据（前端要渲染 / 处理的内容）
请求方法和状态码
请求方法
语义化，告诉服务器要做什么。如GET就是查询，POST就是创建，PUT就是更新，DELETE就是删除。
| 方法 | 是否有请求体 | 常用场景 | 幂等性 |
|---|---|---|---|
| GET | 无(拼接参数) | 查询数据 | 是 |
| POST | 有(请求体) | 新增数据，隐私度高的数据查询 | 否 |
| PUT | 有(请求体) | 修改数据 | 是 |
| DELETE | 无 | 删除数据 | 是 |
| PATCH | 有(请求体) | 修改数据 | 是 |
| HEAD | 无 | 获取数据信息 | 是 |
| OPTIONS | 无 | 获取支持的请求方法 | 是 |
| TRACE | 无 | 测试请求 | 否 |
| CONNECT | 无 | 代理请求 | 否 |
幂等性：指对同一资源进行多次操作时，结果一致。如 GET 请求，多次请求结果一致。 （比如 GET 查 10 次，结果一样；POST 提交 10 次，可能创建 10 条数据，非幂等）
状态码
3 位数字，首位分类，前端根据状态码做不同处理（如 200 成功、401 未登录、500 服务器错）
| 状态码分类 | 首位 | 含义 | 常用 |
|---|---|---|---|
| 请求 | 1** | 请求中 | 100 Continue（请求继续） 、101 Switching Protocols（切换协议） |
| 成功 | 2** | 操作成功 | 200 OK（成功）、201 Created（创建成功） |
| 重定向 | 3** | 重定向 | 301 永久重定向（域名变更）、302 临时重定向、304 协商缓存命中（性能优化） |
| 客户端错误 | 4** | 客户端错误 | 400 Bad Request（参数错误）、401 Unauthorized（未登录 / 令牌过期）、403 Forbidden（无权限）、404 Not Found（路径不存在）、405 Method Not Allowed（请求方法不支持） |
| 服务器错误 | 5** | 服务器错误 | 500 Internal Server Error（服务器未知错）、502 Bad Gateway（网关错）、503 Service Unavailable（服务器忙） |
HTTP 版本演进
HTTP 不是一成不变的，核心演进方向是「提升性能、减少延迟」。
| 版本 | 特征 | 优点 | 缺点 | 前端感知 |
|---|---|---|---|---|
| 0.9 | 纯文本 | 简单、兼容性好 | 无状态 | 无 |
| 1.0 | 短连接、无长连接 | 实现简单 | 频繁建立 / 断开 TCP，性能差 | 早期 Web，现在基本不用 |
| 1.1 | 支持长连接（keep-alive）、支持管道化请求、支持缓存控制 | 减少 TCP 连接开销，提升性能 | 队头阻塞（一个请求慢，后面请求都等） | 目前最常用，日常开发默认 |
| 2.0 | 二进制帧传输、多路复用、服务器推送、头部压缩 | 解决队头阻塞，性能大幅提升 | 依赖 HTTPS，部分老浏览器不支持 | 加载更快，接口并发无阻塞，主流项目已适配 |
| 3.0 | 基于 QUIC 协议（UDP）、彻底解决队头阻塞 | 延迟更低、更稳定（弱网友好） | 普及度低 | 前端感知更友好，开发更简单 |
HTTP 缓存
强缓存
优先级高，不用询问服务器 原理：本地有缓存，且未过期，直接用本地缓存，不发请求给服务器 请求头（响应头）：Cache-Control（主流）、Expires（老旧） 常用值：Cache-Control: max-age=3600（缓存 1 小时）、no-cache（不强制缓存，走协商缓存）、no-store（不缓存）
协商缓存
原理：强缓存过期后，客户端带缓存标识问服务器「缓存还能用吗」，服务器判断后返回 304（能用，用本地缓存）或 200（不能用，返回新资源）
缓存标识（请求头 + 响应头配对）：
- ETag / If-None-Match（优先，基于资源内容生成唯一标识）
- Last-Modified / If-Modified-Since（基于资源最后修改时间）
跨域与预检请求
跨域
什么是跨域？
同源：域名、端口、协议一致，否则为跨域（如 http://localhost:8080 访问 https://localhost:3000 跨域）
跨域解决方案
配置 CORS（跨域资源共享，HTTP 层面解决）
Access-Control-Allow-Origin: * // 允许所有源访问
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS // 允许的请求方法
Access-Control-Allow-Headers: Content-Type, Authorization// 允许的请求头常用请求头/响应头
请求头
- host：访问的域名
- Content-Type: 请求体格式
- application/json json格式
- application/x-www-form-urlencoded 表单格式
- multipart/form-data 文件上传
- Authorization: 身份令牌
- Accept：客户端能接收的响应数据格式（如 application/json）
响应头
- Access-Control-Allow-Origin：允许的源
- Access-Control-Allow-Methods：允许的请求方法
- Access-Control-Allow-Headers：允许的请求头
- Content-Type：响应数据格式
- Set-Cookie：设置 Cookie
- Cache-Control：缓存控制
HTTP 和 HTTPS 的对比
核心：HTTPS = HTTP + TLS 加密层，数据传输加密，HTTP 明文传输 安全：HTTPS防抓包篡改、防窃听、防冒充（有证书验证） 端口：HTTP→80，HTTPS→443 前端感知：地址栏有小锁标识，跨域时部分场景要求 HTTPS（如 Service Worker）