代理服务器配置

代理服务器配置的必要性

Vite开发服务器默认情况下只能处理本地文件请求，但在实际开发中经常需要与后端API交互。由于浏览器的同源策略限制，直接请求不同源的API会导致跨域问题。配置代理服务器可以解决这个问题，将API请求转发到目标服务器，避免跨域错误。

基本代理配置

在vite.config.js中通过server.proxy选项配置代理。最简单的代理配置只需要目标地址：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
})

这个配置表示所有以/api开头的请求都会被代理到http://localhost:3000。例如，前端请求/api/users会被转发到http://localhost:3000/api/users。

路径重写

有时后端API的路径前缀与前端不同，可以使用rewrite选项修改路径：

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

这样，请求/api/users会被转发到http://localhost:3000/users，去掉了/api前缀。

多目标代理配置

项目可能需要连接多个后端服务，可以为不同路径配置不同目标：

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

高级配置选项

代理配置支持更多高级选项：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,  // 修改请求头中的host为目标URL
        secure: false,      // 代理到https时可能需要
        ws: true,           // 代理websocket
        headers: {
          'X-Custom-Header': 'value'
        },
        configure: (proxy, options) => {
          // 直接访问proxy实例进行更细粒度控制
        }
      }
    }
  }
})

环境变量集成

实际项目中，代理目标地址可能因环境而异。可以结合环境变量配置：

// vite.config.js
export default defineConfig(({ mode }) => ({
  server: {
    proxy: {
      '/api': {
        target: mode === 'development' 
          ? 'http://localhost:3000' 
          : 'https://api.example.com',
        changeOrigin: true
      }
    }
  }
}))

WebSocket代理

对于需要实时通信的应用，WebSocket也需要代理：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/socket': {
        target: 'ws://localhost:3001',
        ws: true,
        changeOrigin: true
      }
    }
  }
})

自定义中间件

对于更复杂的场景，可以直接操作底层connect实例：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      // 基本代理配置
    },
    middlewareMode: true,
    configureServer(server) {
      server.middlewares.use('/custom', (req, res, next) => {
        // 自定义处理逻辑
      })
    }
  }
})

常见问题解决

代理配置不生效时，检查以下几点：

1. 确保请求路径匹配代理规则
2. 开发服务器重启后配置才生效
3. 复杂的URL可能需要encode
4. 查看Vite服务器日志确认请求是否被正确代理

// 示例：带查询参数的代理
export default defineConfig({
  server: {
    proxy: {
      '/search': {
        target: 'http://localhost:3000',
        rewrite: path => path + '&proxy=true'
      }
    }
  }
})

性能优化建议

对于大量API请求的场景：

1. 合并相似API路径到同一代理规则
2. 避免过于宽泛的路径匹配(如/会代理所有请求)
3. 生产环境应直接访问API，避免不必要的代理层

// 不推荐的宽泛匹配
export default defineConfig({
  server: {
    proxy: {
      '/': 'http://localhost:3000'  // 会代理所有请求，包括静态资源
    }
  }
})

与其他工具集成

当项目使用其他工具时，代理配置可能需要调整：

// 与Vitest测试一起使用
export default defineConfig({
  test: {
    server: {
      proxy: {
        '/api': 'http://localhost:3000'
      }
    }
  }
})

动态代理配置

对于需要根据请求动态决定代理目标的情况：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        router: req => {
          // 根据请求头或其他条件返回不同目标
          return req.headers['x-api-version'] === 'v2' 
            ? 'http://localhost:3002' 
            : 'http://localhost:3001'
        }
      }
    }
  }
})