Vite 代理通过本地服务器转发请求解决跨域，需在 vite.config.ts 的 server.proxy 中配置 target、changeOrigin、rewrite 和 secure；前端必须用 /api/login 等根路径请求，不可用完整 URL 或 ./api/login。

在 Vite 中配代理解决开发环境跨域，本质是让浏览器只跟本地开发服务器通信，由它代为转发请求到后端——浏览器全程同源，自然不报 CORS 错误。

改 vite.config.ts（或 .js）里的 server.proxy

代理规则必须写在项目根目录的 vite.config.ts（或 vite.config.js）中，位于 server.proxy 对象下。它是一个键值对结构，键是前端请求路径前缀，值是转发配置：

• target：填后端真实地址，如 http://localhost:8080 或 https://api.example.com
• changeOrigin：必须设为 true，否则部分后端（如 Spring Boot）会因 Origin 头不匹配而拒绝请求
• rewrite：用于去掉前端路径前缀，适配后端真实接口路径（常见于后端接口不带 /api 前缀时）
• secure：目标为 http 时建议设为 false；若目标是 https 且证书不合法，也需设为 false

两种典型配置写法

根据后端接口路径风格选一种：

WebChat Voice Proxy

⚠️ 已弃用 — 该技能已拆分为两个独立技能，以提升模块化程度：**webchat-https-proxy**（HTTPS/WSS 反向代理）和 **webchat-voi...**

下载

• 后端接口本身带 /api 前缀（如 http://localhost:8080/api/login）：
  不需要 rewrite，直接转发即可：

  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    secure: false
  }

• 后端接口无前缀（如 http://localhost:8080/login），但你想前端统一用 /api/login：
  必须加 rewrite 去掉前缀：

  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }

前端请求必须配合相对路径

代理只对匹配前缀的路径生效，所以请求写法很关键：

• ✅ 正确：用以 / 开头的绝对路径，如 fetch('/api/login') 或 axios.get('/api/users')
• ❌ 错误：写完整 URL，如 fetch('http://localhost:8080/api/login') —— 这会绕过代理，仍触发跨域
• ⚠️ 注意：不能用 ./api/login 这类相对路径，必须是根路径开头（/）
• 推荐封装请求层，把 base URL 设为 import.meta.env.VITE_API_BASE_URL || '/api'，再配合 .env.development 管理环境变量，开发走代理、上线直连

其他实用细节

配置完别忘了重启开发服务，代理才生效。另外：

• proxy 只在 vite dev 时起作用，打包构建（vite build）完全不参与
• 支持多个代理规则，比如同时代理 /api 和 /mock 到不同后端
• 如需代理 WebSocket，加上 ws: true
• 正则匹配路径也可行，适合动态前缀场景