vite.config.js 代理配置

vite.config.js 基础代理配置

在 vite.config.js 中通过 server.proxy 配置代理，解决开发环境跨域问题。以下为基本示例：

javascript 复制代码

import { defineConfig } from 'vite'

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

多路径代理配置

支持同时代理多个不同路径到不同后端服务：

javascript 复制代码

proxy: {
  '/api': {
    target: 'http://service1.example.com',
    changeOrigin: true
  },
  '/uploads': {
    target: 'http://service2.example.com',
    changeOrigin: true
  }
}

路径重写规则

通过 rewrite 函数修改请求路径：

javascript 复制代码

proxy: {
  '/data': {
    target: 'http://api.example.com/v2',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/data/, '/new/path')
  }
}

WebSocket 代理支持

配置 WebSocket 连接代理：

javascript 复制代码

proxy: {
  '/socket': {
    target: 'ws://your-websocket-server.com',
    ws: true,
    changeOrigin: true
  }
}

自定义请求头处理

通过 headers 配置添加或修改请求头：

javascript 复制代码

proxy: {
  '/secure': {
    target: 'https://secure-api.example.com',
    changeOrigin: true,
    headers: {
      'X-Custom-Header': 'value',
      Authorization: 'Bearer token_here'
    }
  }
}

开发环境与生产环境区分

结合环境变量动态配置代理：

javascript 复制代码

const isDev = process.env.NODE_ENV === 'development'

export default defineConfig({
  server: isDev ? {
    proxy: {
      '/api': {
        target: 'http://dev-server.example.com'
      }
    }
  } : undefined
})

HTTPS 目标配置

代理到 HTTPS 后端时需要配置安全选项：

javascript 复制代码

proxy: {
  '/secure-api': {
    target: 'https://secure.example.com',
    secure: false, // 忽略证书验证
    changeOrigin: true
  }
}

代理超时设置

配置请求超时时间（毫秒）：

javascript 复制代码

proxy: {
  '/slow-api': {
    target: 'http://slow-server.example.com',
    timeout: 5000 // 5秒超时
  }
}

代理 bypass 函数

实现条件代理逻辑：

javascript 复制代码

proxy: {
  '/conditional': {
    target: 'http://example.com',
    bypass: (req, res, options) => {
      if (req.headers.accept?.includes('html')) {
        return '/index.html'
      }
    }
  }
}

完整配置示例

结合多种配置的完整示例：

javascript 复制代码

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        headers: {
          'X-Forwarded-Host': 'localhost'
        }
      },
      '/ws': {
        target: 'ws://chat-server:4000',
        ws: true
      }
    }
  }
})