前端 vs 后端请求：核心差异与实战对比
1. 一句话速记
| 维度 | 前端 | 后端 |
|---|---|---|
| 核心差异 | 浏览器沙箱限制 | 服务器进程自由 |
| 一句话 | 受同源策略约束的 HTTP 调用 | 不受同源策略约束的任意协议网络调用 |
2. 四维原理对比（详细版）
| 维度 | 前端 | 后端 | 备注 / 示例 |
|---|---|---|---|
| 发起者 | 浏览器渲染进程里的 JS 引擎 | Node、Java、Go、Python… | SSR 时 Node 代码仍算后端请求 |
| 协议 / 库 | fetch、XMLHttpRequest、WebSocket | http(s)、net、grpc、mysql、redis、axios、request、curl… | 浏览器无法直接发 TCP/UDP |
| 安全限制 | 1. 同源策略 (scheme+host+port) 2. CORS 预检 OPTIONS 3. CSP 4. Cookie SameSite | 无浏览器级限制，仅受服务器防火墙/ACL 控制 | 后端可携带任意 Header、私钥、SSH Key |
| 身份凭证 | • 浏览器自动带 Cookie / Basic Auth • 手动塞 JWT / Token 到 Header | • 自定义 Token、OAuth2、Service Mesh mTLS • 数据库口令、Redis AUTH | 后端可缓存长连接、连接池复用 |
3. 案例：登录 + 拉取并缓存天气
3.1 场景描述
- 用户在前端输入账号密码登录。
- 前端仅需要“上海”天气。
- 后端为了后续推荐，需要静默把“北京、广州、深圳”天气写入 Redis 缓存。
3.2 时序图（Mermaid）
4、安全限制（Security Boundaries）
-
底层原理：同源策略 Same-Origin Policy（SOP）
• 定义：scheme + host + port 三元组完全一致才视为同源。
• 作用域：DOM 访问、Cookie、LocalStorage、IndexedDB、fetch/XHR、WebSocket。
• 设计目标：防止恶意站点读取其他站点的敏感数据（而不是阻止发请求）。 -
浏览器实际行为
┌─────────────┬──────────────┬──────────────┐
│ 场景 │ 请求能否发出 │ 响应能否被 JS 读取 │
├─────────────┼──────────────┼──────────────┤
│ 简单 CORS │ ✅ │ ✅（需 ACAO 头） │
│ 带预检 CORS │ ✅（两次） │ ✅（需 ACAC 头） │
│ no-cors │ ✅ │ ❌（opaque） │
└─────────────┴──────────────┴──────────────┘ -
攻防视角
• CSRF：利用“请求能发出去”的特点，让浏览器携带 Cookie 完成敏感操作。
防护：SameSite=Lax/Strict、双重 Cookie、Token 在 Header。
• XSS + SOP 绕过：通过<script src>/<img>标签天然不受 SOP 限制，窃取 JSONP 响应。
• Spectre / 侧信道：借助高精度计时器读取跨源渲染像素 → 浏览器降低SharedArrayBuffer精度、COEP/COOP。 -
调试技巧
• 浏览器 DevTools → Network → 查看Access-Control-Allow-Origin与预检 OPTIONS。
•chrome://flags/#disable-web-security可临时关闭 SOP（仅本地调试）。
•curl -H "Origin: http://evil.com"快速验证后端 CORS 配置。
================================================================
5、身份凭证（Identity Credentials）
浏览器与服务器在“谁能带什么、怎么带”上截然不同，可用下图概括：
浏览器：Cookie（自动） └─ SameSite、Secure、HttpOnly JWT / Token（手动放到 Header/Body）
服务器：任意 HTTP Header（Authorization、X-Api-Key） mTLS 双向证书 私网协议（Redis AUTH、MySQL 用户名密码、SSH Key 等）
5.1. Cookie 全景
• 属性速查表
Set-Cookie: sessionId=abc; Path=/; Domain=.foo.com; Secure; HttpOnly; SameSite=Lax; Max-Age=3600
• 生命周期
① 浏览器收到响应头 → 写入 Cookie 仓库
② 后续同源请求自动带 Cookie: 头
③ JS 无法读取 HttpOnly Cookie，可缓解 XSS 盗取。
• SameSite 行为矩阵
SameSite=Strict 仅同站导航携带 SameSite=Lax 顶级导航 GET 可带（默认 2022+） SameSite=None 任意跨站都带，必须 Secure
• 典型攻击
- CSRF：跨站 POST 自动带 Cookie → 后端需 Token 二次校验。
- 会话固定：登录前把 Cookie 注入到浏览器 → 登录后劫持会话。
5.2. Token / JWT
• 存储位置
- WebStorage（localStorage/sessionStorage）：易受 XSS 窃取。
- Cookie（双 Cookie）：防 XSS，但仍需防 CSRF。
- Memory：SPA 单页刷新丢失，需配合 refresh_token。
• 传输位置
- Authorization: Bearer <jwt>（前端手动）
- 或签在 Cookie 里（前端不碰，后端解析）。
5.3. 服务器端凭证
• Service-to-Service Token（OAuth2 Client Credentials Grant）
• mTLS：客户端证书自动带在 TLS 握手，无需应用层处理。
• 连接池复用：后端可长期保存数据库密码、Redis AUTH，浏览器做不到。
5.4. 调试 & 审计
• 浏览器：Application → Cookies → 查看属性 & 是否 HttpOnly。
• 后端：
curl -H "Authorization: Bearer $TOKEN" \ -H "Cookie: sessionId=abc" \ https://api.foo.com/user
• 日志：记录 X-Forwarded-For、User-Agent、Authorization 前缀（脱敏后）。
一句话总结
- 浏览器只能在“同源沙箱”里玩，携带的凭证要么 Cookie（自动），要么手动塞 Token；
- 服务器处于“网络终端”，想发什么协议就发什么协议，想带什么凭证就带什么凭证，但必须自己做好鉴权、加密、审计。
5.6 Cookie和Token对比
| 维度 | Cookie | Token（以 JWT 为例） |
|---|---|---|
| 存储位置 | 浏览器提供的 Cookie 存储区（随请求由浏览器 自动 携带在 Cookie 头）。 | 由前端 主动 保存：可放 Cookie、localStorage、sessionStorage、内存等。 |
| 携带方式 | 浏览器 自动 把同域 Cookie 附加到每一次 HTTP 请求（包括图片、CSS 等）。 | 前端 手动 加到请求头，如 Authorization: Bearer <token>。 |
| 大小限制 | 单个 Cookie ≤ 4 KB，每个域名 ≤ ≈180 个（浏览器差异）。 | 只受 URL 长度或服务器配置限制（一般 < 8 KB）。 |
| 安全性 | 默认携带，CSRF 风险；可设置 HttpOnly/Secure/SameSite 缓解。 | 不自动带，天然防 CSRF；但如存 localStorage 会受 XSS 威胁。 |
| 跨域 | 受 同源策略 限制，可配合 withCredentials / CORS 跨域。 | 只要前端能取到 token，任意域名都可主动带到服务器。 |
| 有效期 | 通过 Expires / Max-Age 设置，可持久。 | 由服务器签发时决定（exp 字段），可设短/长，或配合 Refresh Token。 |
| 服务端校验 | 通常只需检查 SessionId，实际会话数据存 服务端内存 / Redis。 | 典型 无状态：服务端仅验证签名即可拿到用户信息（JWT 自包含）。 |
| 注销 & 失效 | 直接删除 Cookie 或让 Session 过期即可。 | 需额外机制：黑名单、短有效期+刷新、版本号等。 |
| 适用场景 | 传统 Session-Cookie 会话、自动登录、广告追踪。 | SPA / 移动端 / 微服务、跨域 API 调用、OAuth 2.0、Serverless。 |
5.7 Cookie、localStorage和sessionStorage对比
| 维度 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 存储大小 | 4 KB（单条） | 5-10 MB | 5-10 MB |
| 生命周期 | 可设置过期时间；默认会话级 | 永久，除非手动删除 | 页面会话级（关闭标签页即清） |
| 作用域 | 同源请求 自动 携带到后端 | 仅 前端 可读写 | 仅 前端 可读写 |
| 是否随 HTTP 请求 | ✅ 浏览器 自动 加到 Cookie 头 | ❌ 不随请求 | ❌ 不随请求 |
| API | document.cookie = ...（字符串拼接） | setItem / getItem / removeItem / clear | 同 localStorage |
| 安全性 | 默认带 CSRF 风险；可 HttpOnly 防 JS 访问 | 受 XSS 威胁 | 受 XSS 威胁 |
| 主要用途 | 登录态、跟踪、偏好 | 本地离线数据、缓存 | 页面内临时数据 |
| 跨标签页共享 | ✅ 同源共享 | ✅ 同源共享 | ❌ 同一标签页内共享 |