当前位置：首页 > news >正文

Vue 配置代理

news 2025/9/26 9:42:41

Vue 代理的核心作用，一句话说清：解决 “跨域请求” 问题。
比如你的 Vue 项目跑在 http://localhost:8080（前端地址），想请求后端接口 http://localhost:3000/api/data（后端地址），因为 “端口不同”，浏览器会拦截这个请求（这就是 “跨域”）。而 Vue 代理能帮你 “伪装” 请求 —— 让前端看起来是在请求自己（8080 端口），实际由代理偷偷转发到后端（3000 端口），避开浏览器的跨域拦截。

一、核心原理：3 步走

前端发请求：不直接发 http://localhost:3000/api/data，而是发 http://localhost:8080/api/data（请求自己的端口）；
代理拦截转发：Vue 代理识别到请求路径里有 /api（可自定义），就把请求偷偷转发给后端地址 http://localhost:3000；
后端响应回传：后端把数据返回给代理，代理再把数据交给前端 —— 整个过程浏览器以为在和 “自己人”（8080）通信，不拦截。

二、两种配置场景

Vue 代理配置在项目根目录的 vue.config.js 文件里（没有就新建一个），核心是 devServer.proxy 选项，分 “简单场景” 和 “复杂场景”。

场景 1：单代理（只对接一个后端）

如果前端只请求一个后端地址，用简单配置即可。

// vue.config.js
module.exports = {devServer: {proxy: 'http://localhost:3000', // 后端真实地址（要转发到的地址）}}}
}

前端怎么发请求？

比如用 axios，直接请求 /api/data（不用写全后端地址）：

// 组件里的请求代码
import axios from 'axios'axios.get('/data') // 实际会被代理转发到 http://localhost:3000/data
.then(res => {console.log('后端返回的数据：', res.data)
})
.catch(err => {console.log('请求出错：', err)
})

场景 2：多代理（对接多个后端）

如果需要请求两个不同的后端（比如一个是 3000 端口的用户接口，一个是 4000 端口的商品接口），可以配置多个匹配规则。

// vue.config.js
module.exports = {devServer: {proxy: {// 1. 第一个代理：匹配 "/api/user" 开头的请求，转发到 3000 端口（用户后端）'/api/user': {target: 'http://localhost:3000', // 2. 后端真实地址（要转发到的地址）ws: true, // 3. 支持WebSocket（可选，比如实时通信需要，默认为true）changeOrigin: true, // 4. 关键：让后端以为请求是从代理发的（伪装请求源，默认为true）pathRewrite: { // 5. 路径重写：比如前端发 "/api/user/data"，实际转发给后端 "/data"// （如果后端接口本身就带 "/api/user"，这行可以删掉）'^/api/user': '/user' }},// 第二个代理：匹配 "/api/goods" 开头的请求，转发到 4000 端口（商品后端）'/api/goods': {target: 'http://localhost:4000',changeOrigin: true,pathRewrite: { '^/api/goods': '/goods' } // 转发后变http://localhost:4000/goods/xxx}}}
}

前端怎么发请求？

按不同接口路径发，代理会自动转发到对应后端：

// 请求用户数据（走3000端口）
axios.get('/api/user/info') // 转发到 http://localhost:3000/user/info// 请求商品数据（走4000端口）
axios.get('/api/goods/list') // 转发到 http://localhost:4000/goods/list

三、注意

配置后要重启项目：改了 vue.config.js 后，必须重启 Vue 项目（npm run serve），代理配置才会生效；
changeOrigin: true 必加：如果不加，后端会识别到请求源是 8080（前端端口），可能会拒绝跨域；
pathRewrite 按需用：如果后端接口本身就带 /api（比如后端地址是 http://localhost:3000/api/data），就不用写 pathRewrite；如果后端接口没有 /api，就需要用它把 /api 去掉；
只在开发环境生效：Vue 代理是 devServer 里的配置，只能在开发时（npm run serve）用；项目打包上线后（npm run build），需要靠后端配置跨域（比如 Nginx 转发），前端代理就没用了。