本文详解 Vue（Vite）前端与 Express 后端分离开发时的 Cookie 传递难题，通过开发期代理配置与生产期反向代理方案，实现 httpOnly、Secure 和 SameSite Cookie 的可靠传输。
本文详解 vue（vite）前端与 express 后端分离开发时的 cookie 传递难题，通过开发期代理配置与生产期反向代理方案，实现 `httponly`、`secure` 和 `samesite` cookie 的可靠传输。
在 Vue + Express 全栈开发中，前后端分离部署（如 Vue 运行在 http://localhost:5173，Express API 在 http://localhost:3000）会导致浏览器因同源策略（CORS）拒绝发送 httpOnly Cookie——即使后端已正确设置 Set-Cookie，前端发起的 fetch 或 axios 请求也不会自动携带该 Cookie，也无法通过 JavaScript 读取，从而导致登录态无法维持。
根本原因在于：跨域请求默认不发送凭证（credentials），而 httpOnly Cookie 必须依赖浏览器自动携带机制，不能手动注入。
✅ 正确解法分两阶段：
1. 开发阶段：Vite 代理（推荐且标准）
在 vite.config.ts（或 .js）中配置 server.proxy，将 /api 前缀请求代理至 Express 服务，使前端请求看似“同源”：
// vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true, // 修改请求头中的 origin，避免后端校验失败
secure: false, // 若 Express 使用 HTTP（非 HTTPS），设为 false
rewrite: (path) => path.replace(/^\/api/, ''), // 可选：去除 /api 前缀再转发
}
}
}
})同时，前端请求应统一使用相对路径（保持同源语义）：
立即学习“前端免费学习笔记（深入）”；
// 登录示例（Vue 组件中）
await fetch('/api/login', {
method: 'POST',
credentials: 'include', // ✅ 关键！启用凭证传输
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
})后端 Express 需显式支持 CORS 凭证并允许指定源（开发时可放宽）：
// express.js
import cors from 'cors';
app.use(cors({
origin: 'http://localhost:5173',
credentials: true // ✅ 允许携带 Cookie
}));
app.use(cookieParser());
app.use(session({
secret: 'your-secret',
resave: false,
saveUninitialized: false,
cookie: {
httpOnly: true,
secure: false, // 开发环境用 HTTP，设为 false
sameSite: 'lax', // 推荐，兼顾安全与兼容性
maxAge: 24 * 60 * 60 * 1000
}
}));2. 生产阶段：Nginx 反向代理（最佳实践）
构建 Vue 产物后，由 Nginx 统一托管，将 /api 路径代理至 Express 服务，实现真正同源：
# nginx.conf
server {
listen 80;
server_name your-domain.com;
location / {
root /var/www/your-vue-dist;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:3000; # 指向 Express
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cookie_path / "/"; # 确保 Cookie 路径匹配根域
}
}此时前端请求 /api/login 实际由 Nginx 转发，全程 same-site，httpOnly Cookie 自动收发无阻。
⚠️ 注意事项：
- 切勿在开发时强行构建并本地 serve 前端（如
npm run build && serve -s dist -p 3000），这会丧失热更新与调试能力，违背开发效率初衷； -
credentials: 'include'必须与后端Access-Control-Allow-Credentials: true配对，否则浏览器直接拒绝响应； - 生产环境
secure: true仅在 HTTPS 下生效，Nginx 需配置 SSL 并透传X-Forwarded-Proto； -
SameSite建议设为'lax'（默认值），避免跨站 POST 失效，同时防范 CSRF；严格模式（'strict'）可能导致导航链路丢失 Cookie。
综上，代理不是权宜之计，而是现代全栈开发的标准范式——它既解决 Cookie 传递本质问题，又保障开发体验与生产一致性。
