react的vite如何配置代理

在 Vite 中配置代理

Vite 使用 vite.config.js 文件进行配置，代理设置可以通过 server.proxy 选项实现。以下是一个典型的代理配置示例：

import { defineConfig } from 'vite'

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

代理配置参数说明

target：指定要代理到的目标服务器地址

changeOrigin：修改请求头中的 host 值为 target 值，通常设置为 true

rewrite：重写路径的函数，可以移除或修改请求路径前缀

多路径代理配置

可以配置多个代理路径，针对不同的 API 前缀代理到不同的服务器：

proxy: {
  '/api': {
    target: 'http://api.server.com',
    changeOrigin: true
  },
  '/uploads': {
    target: 'http://static.server.com',
    changeOrigin: true
  }
}

更复杂的重写规则

如果需要更复杂的路径重写，可以使用函数形式：

rewrite: (path) => {
  if (path.startsWith('/api/v1')) {
    return path.replace('/api/v1', '/v1')
  }
  if (path.startsWith('/api/v2')) {
    return path.replace('/api/v2', '/v2')
  }
  return path
}

处理 WebSocket 代理

如果需要代理 WebSocket 连接，可以添加 ws 配置：

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

环境变量配置

可以将代理配置与环境变量结合使用，便于不同环境切换：

proxy: {
  '/api': {
    target: process.env.VITE_API_BASE_URL || 'http://localhost:3000',
    changeOrigin: true
  }
}

配置完成后，开发服务器会自动将匹配的请求代理到目标服务器，同时处理 CORS 等问题。