vite代理解决跨域的核心是三步：改vite.config.ts、加server.proxy规则、前端请求用相对路径；通过开发服务器转发请求，不依赖后端cors配置，对浏览器透明。
在 TypeScript 项目中用 Vite 配置代理解决开发环境跨域问题，核心是三步：改 vite.config.ts、加 server.proxy 规则、前端请求走相对路径。它不修改后端，也不依赖 CORS 头，纯粹靠开发服务器做“中间转发”，对浏览器完全透明。
代理配置写在 vite.config.ts 里
打开项目根目录的 vite.config.ts，在 defineConfig 的 server 选项中添加 proxy 对象。例如后端运行在 http://localhost:8080，所有 /api 开头的请求都应被代理过去：
-
target填真实后端地址（协议+域名+端口） -
changeOrigin: true必须开启，否则某些后端会校验 Origin 头并拒绝请求 -
rewrite用于去掉前缀，比如把/api/users转成/users再发给后端
完整示例：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});
前端请求必须用相对路径
代理只对以配置前缀开头的路径生效，所以不能写完整 URL。错误写法：fetch('http://localhost:8080/api/user')；正确写法：fetch('/api/user')。Vite 开发服务器收到这个请求后，才会按规则转发。
- 使用
fetch、axios或其他 HTTP 库时， baseURL 统一设为''（空字符串）或直接拼接路径 - 如果用了全局请求封装，建议把基础路径设为
import.meta.env.VITE_API_BASE_URL || ''，开发时填'/api'，生产时填真实域名
配合环境变量统一管理 API 地址
避免硬编码，推荐用 .env.development 和 .env.production 区分环境：
- 在
.env.development中写：VITE_API_BASE_URL=/api - 在
.env.production中写：VITE_API_BASE_URL=https://api.example.com - TypeScript 类型提示别漏：在
env.d.ts里声明readonly VITE_API_BASE_URL: string
这样前端代码就能安全读取：fetch(`${import.meta.env.VITE_API_BASE_URL}/user`)，开发走代理，上线直连。
常见问题排查要点
代理配置后仍报跨域？先确认这几项：
- 请求路径是否真的以
/api（或你配的前缀）开头？大小写、斜杠位置都要一致 - 终端启动的是开发服务（
pnpm dev），不是直接打开 HTML 文件 - 浏览器控制台 Network 标签里，该请求的发起域名是否是
localhost:5173（即 Vite 端口），而不是直接打到后端地址 - 后端是否返回了 404 或 500？代理成功不代表后端逻辑一定通，只是绕过了浏览器限制
