前端 DevServer 代理是开发环境解决跨域最常用、最安全的方式，通过本地服务器拦截并转发请求，使浏览器“看似同源”；Vue CLI 在 vue.config.js 中配置 proxy，Vite 在 vite.config.js 中配置 server.proxy，均支持路径重写、跨域凭证传递等特性。
在开发环境中，前端 DevServer 代理是解决跨域最常用、最安全的方式。它不依赖后端修改，也不暴露真实接口地址给浏览器，本质是让请求“看起来同源”——浏览器只跟本地开发服务器通信，由服务器代为转发到后端。
核心原理：请求路径被本地服务器拦截并中转
浏览器向 http://localhost:8080/api/users 发起请求 → 本地 DevServer（如 Webpack DevServer 或 Vite）识别到 /api 前缀 → 将请求改写并转发至 http://localhost:3000/api/users（或线上后端地址）→ 后端响应返回给 DevServer → DevServer 再把结果回传给浏览器。整个过程浏览器全程无感知，彻底绕过同源策略。
Vue CLI（Vue 2/3）项目配置（vue.config.js）
在项目根目录的 vue.config.js 中添加：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 后端真实地址
changeOrigin: true, // 修改请求头 origin 为目标地址（关键）
pathRewrite: { '^/api': '' }, // 把 /api 前缀去掉再转发
secure: false, // 若代理 HTTPS 后端，需设为 false
logLevel: 'debug' // 开启日志便于排查
}
}
}
}
前端代码直接调用：
axios.get('/api/users') // 实际访问 http://localhost:3000/users
Vite 项目配置（vite.config.js）
对应配置更简洁，但逻辑一致：
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
注意事项与常见问题
-
仅开发环境生效：proxy 配置在生产构建（
npm run build）后完全不参与，上线需由 Nginx 或网关统一处理跨域 -
路径匹配是前缀匹配：配置
'/api'会匹配/api、/api/users、/api/v1/login，但不匹配/apis -
多个后端可分路径代理：例如同时代理用户服务和订单服务，可分别配置
'/users'和'/orders'对应不同target -
带 Cookie 的请求需额外设置：若需传递凭证，前端 axios 要加
{ withCredentials: true }，且后端必须返回Access-Control-Allow-Credentials: true及具体域名（不能用*）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
