企业网站推广 知乎天津百度推广公司电话

以下是一个详细的 Vue 项目配置 Proxy 代理 的示例和说明，用于解决开发环境跨域问题：

---

1. 基础代理配置

vue.config.js 配置文件

// vue.config.js
module.exports = {devServer: {proxy: {// 代理所有以 /api 开头的请求'/api': {target: 'http://localhost:3000', // 后端接口地址changeOrigin: true,              // 开启虚拟域名pathRewrite: {'^/api': ''                    // 重写路径(可选)}}}}
}

使用示例

// 前端请求代码
axios.get('/api/users') // 实际转发到 http://localhost:3000/users

---

2. 多路径代理配置

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true},'/uploads': {target: 'http://resource-server.com',changeOrigin: true,pathRewrite: {'^/uploads': '/static' // 重写路径到/static}}}}
}

---

3. 高级代理配置

代理 WebSocket

// vue.config.js
module.exports = {devServer: {proxy: {'/socket.io': {target: 'ws://localhost:4000',ws: true,          // 代理WebSocketchangeOrigin: true}}}
}

绕过代理的白名单

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:3000',bypass: function(req) {// 不代理 /api/login 请求if (req.url === '/api/login') {return req.url;}}}}}
}

---

4. 配置参数说明

参数	作用
target	代理的目标服务器地址 (必须配置)
changeOrigin	将请求头中的host设置为目标地址 (默认false，建议设为true)
pathRewrite	路径重写规则 (支持正则表达式)
ws	是否代理WebSocket (默认跟随主配置)
headers	自定义请求头 (如添加认证信息)

---

5. 常见问题排查

代理不生效的检查步骤

1. 检查 vue.config.js 是否在项目根目录
2. 重启开发服务器 (npm run serve)
3. 查看浏览器控制台网络请求：
   • 请求URL应为相对路径 (如 /api/data)
   • 实际请求地址应显示为代理目标地址
4. 检查是否配置了多层路径重写

生产环境注意事项

• 该配置 仅适用于开发环境 (npm run serve)
• 生产环境需要通过Nginx等Web服务器配置反向代理
• 推荐生产环境使用绝对路径接口地址

---

完整配置示例

// vue.config.js
module.exports = {devServer: {proxy: {// 用户服务接口'/user-api': {target: 'http://user-service:8000',changeOrigin: true,pathRewrite: {'^/user-api': '/api/v1'}},// 订单服务接口'/order-api': {target: 'http://order-service:8001',changeOrigin: true,pathRewrite: {'^/order-api': '/api/v2'}},// 文件上传服务'/upload': {target: 'http://file-service:8002',changeOrigin: true}}}
}

---

Nginx 生产环境配置参考

server {listen 80;server_name yourdomain.com;location /api/ {proxy_pass http://backend-server:3000/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}location / {root /usr/share/nginx/html;try_files $uri $uri/ /index.html;}
}

通过以上配置，即可实现开发环境的接口代理和跨域请求处理。