搞懂前端代理：Axios baseURL 与 Vite Proxy 的协作机制

#前端工程化 #网络请求与跨域 #环境配置与部署 #Vite #Axios

在搭建前端项目时，我们常会发现 myAxios.ts（请求封装）和 vite.config.ts（构建配置）中似乎都在配置后端地址。为什么myAxios和vite.config都要配置请求地址？能不能只写一个？

这两者虽然看似重复，实则各司其职，缺一不可。

1.职责分离

• myAxios.ts (baseURL)：是"暗号"

它给所有请求加上统一前缀（如 /api），告诉代码：“凡是带这个前缀的，都是发给后端的”。

生效范围：开发环境 + 生产环境

• vite.config.ts (Proxy)：是"翻译官"

它拦截带有“暗号”的请求，将其转发到真实的后端地址（如 localhost:8080），解决浏览器的同源策略 （跨域）限制

生效范围：仅限开发环境

2.流量流向对比

• 开发环境 (Dev)：
  Axios 发送 '/api/user' ➔ Vite 服务器拦截 ➔ 代理转发到 'http://localhost:8080/user'
• 生产环境 (Prod)：
  Axios 发送 '/api/user' ➔ Nginx/后端服务器直接接收 (此时没有 Vite 了)

3.为什么不能只写一个：

• 如果只在 Axios 写死 'http://localhost:8080' ， 生产环境会报错（地址变了），且开发环境会有跨域问题。
• 如果只在 Vite 配代理：Axios 不加前缀，Vite 就不知道哪些请求需要被代理转发。

以此确保：

• 开发环境可以正常工作（通过代理解决跨域）
• 生产环境可以正确部署（直接请求后端）
• 代码的可维护性（清晰的职责分离）

4.代码实例：

▼
typescript
复制代码
// 开发和生产都用这个相对路径
const myAxios = axios.create({
  baseURL: '/api' // 统一前缀，不写死 IP
});

▼
typescript
复制代码
// 只在开发环境使用
server: {
  proxy: {
    '/api': {// 捕获前缀
      target: 'http://localhost:8080',// 真实后端地址
      changeOrigin: true
    }
  }
}