CORS 与前后端联调

这节要解决什么

让 Vue 开发服务器（5173）能顺利调用 Nest（3000），搞懂跨域是怎么回事。

先用大白话

浏览器有个安全规则：网页在 A 域名，默认不能乱调 B 域名的接口（协议/域名/端口任一不同都算跨域）。

本地常见情况：

• 前端：http://localhost:5173
• 后端：http://localhost:3000

这就是跨域。解决办法常见两种：

1. 后端开 CORS：允许来自 5173 的请求（Nest：app.enableCors(...)）
2. 前端开发代理：Vite 把 /api 转到 3000，浏览器以为同源

本资料的 Vue 项目用 Vite 代理 为主（简单），Nest 同时打开了宽松的开发期 CORS，双保险。

对着项目做

终端 1：

cd projects/03-nest-bookmark-api
npm run start:dev

终端 2：

cd projects/04-vue-bookmark-web
npm install
npm run dev

浏览器打开 Vite 提示的地址，走一遍：注册 → 登录 → 新建书签 → 列表 → 删除。

前端关键文件：

• vite.config.ts：server.proxy
• src/api.ts：封装请求、自动带 token
• src/App.vue 或页面组件：登录与列表 UI

和 Nuxt 联调时怎么做

学完后把前端换成 Nuxt 时：

• 开发期同样可用 nitro/vite proxy，或让 Nest enableCors
• token 仍可放 cookie 或 localStorage（团队规范优先）
• 业务接口不用改 —— 这就是 API 与 UI 分离的好处

验收清单

• 两套服务同时跑通
• 浏览器里完成登录和书签 CRUD
• 能说清为什么本地会跨域、你用了哪种解决办法

下一节 → 02-工程化清单.md