Vite Proxy配置详解：从入门到实战应用

Vite Proxy配置详解：从入门到实战应用

一、什么是Proxy代理？

Proxy（代理）是开发中常用的解决跨域问题的方案。Vite内置了基于http-proxy的代理功能，可以轻松配置API请求转发。

二、基础配置

在vite.config.js中配置proxy选项：

export default defineConfig({
  server: {
    proxy: {
      /api: {
        target: http://localhost:3000,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, )
      }
    }
  }
})

• target: 代理目标地址
• changeOrigin: 修改请求头中的host为目标URL
• rewrite: 路径重写

三、进阶配置

1. 多代理配置

proxy: {
  /api1: {
    target: http://localhost:3001,
    // ...其他配置
  },
  /api2: {
    target: http://localhost:3002,
    // ...其他配置
  }
}

2. WebSocket代理

proxy: {
  /socket.io: {
    target: ws://localhost:3000,
    ws: true
  }
}

3. 自定义代理规则

proxy: {
  ^/api/.*: {
    target: http://localhost:3000,
    bypass(req) {
      if (req.headers.accept.indexOf(html) !== -1) {
        return /index.html
      }
    }
  }
}

四、实战应用

1. 解决开发环境跨域

proxy: {
  /api: {
    target: https://production-server.com,
    changeOrigin: true,
    secure: false
  }
}

2. 模拟不同环境API

const targetMap = {
  dev: http://dev-server,
  test: http://test-server,
  prod: https://prod-server
}

proxy: {
  /api: {
    target: targetMap[process.env.NODE_ENV],
    changeOrigin: true
  }
}

五、常见问题

1. 代理不生效：检查路径是否匹配，特别是正则表达式
2. HTTPS证书问题：设置secure: false跳过证书验证
3. WebSocket无法连接：确保设置了ws: true

六、总结

Vite的Proxy配置简单强大，能有效解决开发中的跨域问题。通过灵活配置可以满足各种复杂场景需求。

提示：生产环境应使用Nginx等服务器处理代理，Vite代理仅用于开发环境。