vue代理实现
Vue 代理实现方法
在 Vue 项目中，配置代理可以解决开发环境下的跨域问题，通常通过修改 vue.config.js 文件实现。以下是几种常见的代理配置方式：
基础代理配置
在 vue.config.js 中配置 devServer.proxy，将特定请求转发到目标服务器：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://target-server.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}target：代理目标地址changeOrigin：修改请求头中的Host为目标地址pathRewrite：重写请求路径（可选）
多代理目标配置
如需代理多个不同路径到不同服务器：
module.exports = {
devServer: {
proxy: {
'/api1': {
target: 'http://server1.com',
changeOrigin: true
},
'/api2': {
target: 'http://server2.com',
changeOrigin: true
}
}
}
}动态代理配置
通过函数动态返回代理配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true
}
}
}
}WebSocket 代理配置
代理 WebSocket 请求需添加 ws: true：
module.exports = {
devServer: {
proxy: {
'/socket': {
target: 'ws://socket-server.com',
ws: true,
changeOrigin: true
}
}
}
}生产环境代理
对于生产环境，通常通过 Nginx 等服务器配置反向代理：
location /api {
proxy_pass http://backend-server;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}注意事项
- 代理仅适用于开发环境，生产环境需通过服务器配置
- 路径匹配规则支持通配符（如
） - 复杂场景可通过
bypass函数自定义代理逻辑 - 修改配置后需重启开发服务器生效
