网络与跨域

系列文章目录

《JavaScript 基础与进阶笔记》（前期偏基础巩固与常见面试点，后续进入闭包、异步、工程化等进阶主题）

• 第 01 篇：数据类型与类型判断
• 第 02 篇：变量声明与作用域
• 第 03 篇：闭包与高阶函数
• 第 04 篇：函数工厂
• 第 05 篇：this 指向与绑定
• 第 06 篇：原型与原型链
• 第 07 篇：类与继承
• 第 08 篇：JS 执行机制与异步队列
• 第 09 篇：数组常用方法
• 第 10 篇：字符串算法
• 第 11 篇：常见手写题合集（上）
• 第 12 篇：常见手写题合集（下）
• 第 13 篇：Promise 与 async/await
• 第 14 篇：数据结构基础
• 第 15 篇：垃圾回收与内存
• 第 16 篇：DOM 基础全面解析
• 第 17 篇：DOM 性能与渲染
• 第 18 篇：DOM 交互补充
• 第 19 篇：DOM 实战案例
• 第 20 篇：CSS 布局与可视化高频
• 第 21 篇：移动端与 viewport
• 第 22 篇：BOM 核心对象
• 第 23 篇：前端路由原理
• 第 24 篇：浏览器存储对比
• 第 25 篇：网络与跨域（本文）

文章目录

• 系列文章目录
• 前言
• 一、HTTP 浏览器缓存（与第 24 篇存储的区别）
• • 1.1 强缓存 vs 协商缓存
  • 1.2 易混：`Cache-Control` 常见值
• 二、同源策略与跨域
• • 2.1 同源
  • 2.2 CORS（主流方案）
  • 2.3 简单请求 vs 预检（Preflight）
  • 2.4 开发环境代理
• 三、Cookie、Session 与 JWT（与第 24 篇衔接）
• 四、TCP 三次握手（简述）
• 五、HTTPS 简述
• 六、一次请求的粗略顺序（串讲题）
• 七、易混淆点归纳
• 八、思考与练习
• 总结

前言

第 24 篇讲的是浏览器里 主动存数据；本篇进入 网络层：资源怎么 缓存、前后端分离怎么 跨域、登录态 Cookie / Session / JWT 怎么理解，以及简历常问的 TCP 三次握手 与 HTTPS。内容多，按「缓存 → 跨域 → 鉴权 → TCP/HTTPS」串起来；Fetch/XHR/WebSocket 细节放在下一篇。

一、HTTP 浏览器缓存（与第 24 篇存储的区别）

1.1 强缓存 vs 协商缓存

请求资源
→ 强缓存未过期？ ──是──→ 直接用本地副本（不发请求或 200 from cache）
→ 否 → 发请求
→ 协商缓存：带 If-None-Match / If-Modified-Since
→ 未变 → 304 Not Modified（用本地副本，body 为空）
→ 已变 → 200 + 新 body

/* 强缓存 — 带 hash 的静态资源 */
Cache-Control: public, max-age=31536000, immutable

/* 协商 — 再次请求 */
If-None-Match: "abc123"
If-Modified-Since: Wed, 10 Apr 2026 00:00:00 GMT

/* 未修改 */
HTTP/1.1 304 Not Modified

1.2 易混：Cache-Control 常见值

工程实践：app.[hash].js → 长 max-age + immutable；index.html → no-cache（每次验证，引到新 hash 资源）。

二、同源策略与跨域

2.1 同源

协议 + 域名 + 端口 三者一致才 同源。 例：https://a.com:443 与 https://a.com/api 同源；http://a.com 与 https://a.com 不同源。

浏览器 同源策略 限制：不同源的页面 JS 读不到 对方 DOM、Ajax/Fetch 默认读不到 响应（会报跨域错误）。

2.2 CORS（主流方案）

服务端通过响应头声明 允许哪些源 访问：

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

/* 前端携带 Cookie */
fetch("https://api.example.com/data", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({ id: 1 }),
});

2.3 简单请求 vs 预检（Preflight）

简单请求（满足方法 GET/HEAD/POST、Content-Type 为简单类型、无自定义头等）→ 直接发，不先 OPTIONS。

非简单请求（如 Content-Type: application/json、自定义 Authorization）→ 浏览器先发 OPTIONS 预检，通过后再发真实请求。

/* 预检失败常见原因 */
/* 1. Allow-Origin 未包含当前页源 */
/* 2. Allow-Headers 未包含 Authorization 等自定义头 */
/* 3. Allow-Methods 未包含 PUT/DELETE 等 */

2.4 开发环境代理

Vite/Webpack devServer.proxy 把 /api 转发到后端，浏览器只请求 同源 的 dev 服务器，绕过 浏览器跨域限制（生产仍靠 CORS 或同域部署）：

// vite.config.js
export default {
server: {
proxy: {
"/api": { target: "http://localhost:8080", changeOrigin: true },
},
},
};

注意：CORS 是 浏览器 行为；curl、Postman 不受 同源限制。

三、Cookie、Session 与 JWT（与第 24 篇衔接）

Cookie + Session：登录 → 服务端建 Session → Set-Cookie(sessionId) → 后续请求自动带 Cookie
JWT：登录 → 服务端签发 JWT → 前端存 Cookie(localStorage) → 请求头 Authorization: Bearer xxx

易混：

• JWT Payload 勿存密码；可被解码，只是签名校验防篡改
• HttpOnly Cookie 存 Token 可减 XSS 窃取；须配合 SameSite 防 CSRF
• 第 24 篇已讲 Cookie 属性；本篇强调 鉴权架构 选型

四、TCP 三次握手（简述）

建立 TCP 连接：SYN → SYN-ACK → ACK，双方进入 ESTABLISHED 后才发 HTTP。

客户端 服务端
│── SYN seq=x ──────────→│
│←─ SYN-ACK seq=y,ack=x+1│
│── ACK ack=y+1 ────────→│
│ 连接建立 │

为何三次：确认双方收发能力；避免 旧 SYN 导致错误连接。

与 HTTP：每次新连接（或复用前）需握手；HTTPS 在 TCP 之上还有 TLS 握手。 断开是 四次挥手（建立三次、断开四次，别混）。

五、HTTPS 简述

HTTPS = HTTP + TLS，默认端口 443，传输 加密，防窃听与篡改（不防 XSS/CSRF 等应用层问题）。

TLS 握手（概念）：协商算法 → 验证 CA 证书 → 交换会话密钥 → 后续用 对称加密（如 AES）传数据。

HSTS：Strict-Transport-Security 强制浏览器后续只用 HTTPS，防降级攻击。

六、一次请求的粗略顺序（串讲题）

DNS 解析 → TCP 三次握手 →（HTTPS：TLS 握手）
→ 发 HTTP 请求（带 Cookie、缓存相关头）
→ 强缓存/协商缓存判断 → 服务端处理
→ 响应（Set-Cookie、Cache-Control、CORS 头、body）
→ 浏览器解析渲染 / JS 处理 JSON

与第 23 篇「输入 URL 后发生什么」可对照记忆；本篇补 缓存头、CORS、鉴权 细节。

七、易混淆点归纳

八、思考与练习

1. Cache-Control: no-cache 和 no-store 区别？

解析：no-cache 可缓存但每次要验证；no-store 完全不存储。

2. 带 Authorization 头的 POST 跨域失败，可能原因？

解析：触发 预检；服务端未正确返回 Allow-Origin/Allow-Headers/Allow-Methods，或 Origin 不在白名单。

3. 为何带 contenthash 的 JS 适合 max-age=31536000, immutable？

解析：文件名变即新资源；旧文件永不变，可 长期强缓存。

4. Session 和 JWT 各适合什么架构？

解析：Session 传统单体/服务端存态；JWT 分布式无状态 API，注意过期与注销策略。

5. HTTPS 能防 XSS 吗？

解析：不能；HTTPS 只保护 传输层，XSS 是 页面执行恶意脚本，需 CSP、转义、HttpOnly 等。

总结

• HTTP 缓存：强缓存（max-age）→ 协商缓存（ETag/304）；静态长缓存、HTML 常 no-cache。
• 跨域：同源策略；CORS 响应头；非简单请求 OPTIONS 预检；开发可用 proxy。
• 鉴权：Cookie+Session vs JWT；与第 24 篇 Cookie 属性配合理解。
• TCP/HTTPS：三次握手建连；HTTPS 加密传输 + 证书。

下一篇讲 网络请求与实时通道：XHR、Fetch、SSE、WebSocket（系列第 26 篇）。