Vue 配置代理 - 技术栈

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：单代理（只对接一个后端）

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

javascript 复制代码

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

前端怎么发请求？

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

javascript 复制代码

// 组件里的请求代码
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 端口的商品接口），可以配置多个匹配规则。

javascript 复制代码

// 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
      }
    }
  }
}

前端怎么发请求？

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

javascript 复制代码

// 请求用户数据（走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 转发），前端代理就没用了。

四、一句话总结

Vue 代理就像 "前端和后端之间的快递员"：前端把包裹（请求）交给快递员（代理），快递员帮你送到后端，再把后端的回信（响应）带给前端，避开了浏览器这个 "保安" 的拦截。