Vue.js 配置 Vite 代理解决开发环境跨域问题-Vue.js-PHP中文网

vite跨域代理配置需在vite.config.js的server.proxy中设置，如'/api'代理至'http://localhost:8080'并启用changeorigin和rewrite，前端请求以/api开头即可自动转发，避免浏览器跨域限制。

vue.js 配置 vite 代理解决开发环境跨域问题

直接在 vite.config.js 里配好代理，前端请求走 /api 开头的路径，Vite 开发服务器就会自动转发到后端地址，浏览器根本看不到跨域——这是开发阶段最干净、最推荐的做法。

代理配置写在哪？

在项目根目录的 vite.config.js（或 vite.config.ts）中，往 server.proxy 对象里加规则即可。不需要改后端、也不用装插件。

确保文件已存在；若没有，新建一个并导出 defineConfig 配置对象
代理只在 vite dev 启动时生效，打包上线后不参与任何逻辑
修改配置后需重启开发服务才能生效

基础代理怎么写？

假设后端运行在 http://localhost:8080，所有接口都带 /api 前缀：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

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

target：填你后端服务的真实地址（支持 http/https，甚至带端口）
changeOrigin：必须设为 true，否则某些后端（如 Spring Boot）会因 Origin 头不匹配而拒绝请求
rewrite：把请求路径里的 /api 删掉，比如 /api/user/login → 转发为 /user/login

前端请求怎么配合？

axios 或 fetch 直接用相对路径发起请求，和代理前缀保持一致：

import axios from 'axios'

// ✅ 正确：路径以 /api 开头，会被代理捕获
axios.get('/api/users')

// ❌ 错误：写成完整 URL，绕过代理，仍会跨域
axios.get('http://localhost:8080/api/users')

请求地址必须是绝对路径（以 / 开头），不能是相对路径如 ./api/users
如果接口本身不带 /api 前缀（比如后端是 /user），那代理路径就配成 '/user'，保持前后一致
建议统一在 request 封装层把 base URL 设为 /api，避免每个地方硬编码

多环境或复杂路径怎么办？

可以用环境变量动态控制，或者配置多个代理规则：

在 .env.development 里定义：VITE_API_BASE_URL=http://192.168.1.100:3000
在 vite.config.js 中加载：const { VITE_API_BASE_URL } = loadEnv(mode, process.cwd())
支持正则匹配路径，例如代理所有以 /mock/ 或 /admin/ 开头的请求，各自指向不同目标
如需代理 WebSocket，加上 ws: true 选项；如目标是 HTTPS 且证书不合法，加 secure: false

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！