反向代理配置

开发环境通过 server.proxy 配置反向代理，解决 API 跨域问题。

基础代理配置

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})

代理选项说明

路径重写

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

请求 /api/users → 代理到 http://localhost:3000/users

注意：changeOrigin 将请求头的 origin 改为目标地址，避免 CORS 问题。

多路径代理

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      },
      '/ws': {
        target: 'ws://localhost:3001',
        ws: true
      },
      '/static': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

WebSocket 代理

export default defineConfig({
  server: {
    proxy: {
      '/ws': {
        target: 'ws://localhost:3001',
        ws: true,
        changeOrigin: true
      }
    }
  }
})

正则匹配代理

export default defineConfig({
  server: {
    proxy: {
      '^/api/v\\d+': {
        target: 'http://api.example.com',
        changeOrigin: true
      }
    }
  }
})

代理请求流程

浏览器 → Vite Server → Proxy → 后端 API
       /api/users           http://backend:3000/users

要点总结

• server.proxy 配置反向代理
• changeOrigin 修改请求头 origin
• rewrite 重写请求路径
• ws: true 支持 WebSocket 代理