如何同时使用Vite与Express实现Cookie共享？

算力阿峰

2026-7-15

解决方案

1. 用Vite代理转发（最优方案，保留热重载+Cookie共享）

这是开发环境下最省心的方案，通过Vite的代理功能，让前端所有后端请求都转发到Express的4000端口，浏览器会认为请求来自同一端口，自然能共享Cookie，同时Vite和nodemon的热重载功能完全不受影响。

修改你的vite.config.js，添加代理配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      // 代理所有/api开头的HTTP请求到后端
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true
      },
      // 单独代理WebSocket请求（如果你的WebSocket路径是/ws）
      '/ws': {
        target: 'ws://localhost:4000',
        ws: true
      }
    }
  }
})

之后前端请求后端接口时，直接用相对路径（比如fetch('/api/login')），不用写完整的http://localhost:4000/api/login，Vite会自动帮你转发，Cookie也会正常携带和共享。

2. 调整Express的Cookie配置（备选方案）

如果不想用代理，可以修改Express设置Cookie时的参数，让浏览器允许跨端口共享Cookie，但这个方法受浏览器限制较多，不一定在所有环境下生效。

在Express设置会话Cookie的代码里，添加以下配置：

res.cookie('sessionId', yourSessionId, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 开发环境必须设为false（因为是HTTP）
  sameSite: 'Lax', // 宽松模式，允许同主机跨端口共享
  domain: 'localhost',
  path: '/',
  maxAge: 24 * 60 * 60 * 1000 // 按需设置过期时间
})

注意：部分现代浏览器对localhost的跨端口Cookie有严格限制，比如Chrome在某些版本下可能还是不允许，所以这个方案不如代理稳定。