learnNote

主题

本地启动指南 ​

怎么把 examples/ 里的代码跑起来，复现各种 CORS 场景。

🚀 5 秒快速开始 ​

只需要本机有 Node.js >= 14（无任何 npm 依赖，全用内置模块）：

bash
cd learnNote/front/cors/examples
node server.js

启动后浏览器打开 http://localhost:3002（注意是 3002，不是 3001），从首页索引点进每个示例。

📦 服务说明 ​

server.js 同时启动了两个服务：

端口角色域名作用
3001API 服务http://localhost:3001被跨域调用的接口
3002页面服务http://localhost:3002把 examples 下的 html 当静态文件提供

关键：必须从 3002 访问 html 文件，这样浏览器才认为页面源是 :3002，调 :3001 才是真正的"跨源"。 如果直接双击 html 文件（file:// 协议），Origin 会是 null，结果跟实际不一致。

🎬 推荐学习顺序 ​

顺序示例主要看
1️⃣01-no-cors经典 CORS 报错长什么样
2️⃣02-simple简单请求只发 1 次
3️⃣03-preflight预检请求 = OPTIONS + 真请求
4️⃣04-credentials跨域 cookie 完整链路
5️⃣05-expose-headers读自定义响应头
6️⃣06-jsonp老办法的原理
7️⃣07-abort取消请求 + 错误分类

每打开一个示例，记得同时打开 Chrome DevTools（F12）→ Network 面板，过滤 "Fetch/XHR"。

🔍 用 DevTools 看 CORS 的正确姿势 ​

1. Network 过滤

[XHR]   只看 XHR / fetch 请求
☑ All  必勾，否则 OPTIONS 预检看不到

2. 看请求的 Headers

请求头里关注：

  • Origin —— 浏览器自动带，不能改
  • Access-Control-Request-Method（仅 OPTIONS 有）
  • Access-Control-Request-Headers（仅 OPTIONS 有）

3. 看响应的 Headers

响应头里关注：

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods（仅 OPTIONS）
  • Access-Control-Allow-Headers（仅 OPTIONS）
  • Access-Control-Allow-Credentials
  • Access-Control-Max-Age（仅 OPTIONS）
  • Access-Control-Expose-Headers

4. 看 Console 红字

CORS 失败时浏览器会在 Console 给出比 fetch 错误对象详细得多的诊断信息，永远先看 Console！

⚙️ 修改示例自己玩 ​

想看"删掉 Allow-Origin 会怎样"，直接改 server.js 里的 setCors 函数。 想加新接口，按现有路由的样子在 server.js 加一段 if (pathname === '/xxx') 即可。

热加载？没做，改完 Ctrl+C 重启就行（教学用的极简服务器）。

❓ 常见问题 ​

Q: 我没装 Node 怎么办？ A: 那就先打开 demo/index.html（双击即可），那是个不需要任何后端的 CORS 决策模拟器。

Q: 端口被占用？ A: 改 server.js 顶部的 3001 / 3002，记得同时改 examples 里 html 的 fetch URL。

Q: 用 https 演示？ A: 跨站 cookie (SameSite=None) 必须 https。可以用 mkcert 自签证书， 然后用 https.createServer({key, cert}, ...) 替换 http.createServer。本仓库为简洁起见用了 http。

Q: Express + cors 中间件示例怎么跑？ A: 那是给生产参考的，不是本 demo 链路。要跑：

bash
cd examples
npm init -y
npm i express cors
node express-cors.js

🧹 清理 ​

bash
# Ctrl+C 停掉 node 进程即可
# 浏览器里清理 cookie：DevTools → Application → Cookies → 删