Настройка прокси в Vite Dev Server: Полное руководство с примерами и FAQ

Что такое Vite Proxy Dev Server и зачем он нужен?

Vite Proxy Dev Server — мощный инструмент для перенаправления API-запросов во время разработки. Когда фронтенд (Vue/React) и бэкенд работают на разных портах, браузер блокирует запросы из-за политики CORS. Прокси решает эту проблему, незаметно пересылая запросы через dev-сервер. Это ускоряет разработку, позволяет работать с куками и авторизацией, а также имитировать production-окружение.

Как настроить прокси в Vite: пошаговая инструкция

Базовая конфигурация добавляется в vite.config.js:

1. Импортируйте defineConfig из Vite
2. В секции server.proxy укажите правила маршрутизации
3. Перезапустите dev-сервер (npm run dev)

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

Продвинутые сценарии использования прокси

Обработка WebSocket

Для приложений реального времени добавьте:

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

Множественные бэкенды

Разделите прокси по префиксам:

proxy: {
  '/auth': { target: 'http://auth-service' },
  '/data': { target: 'http://api-service' }
}

Перезапись путей

Функция rewrite модифицирует URL:

rewrite: (path) => path.replace(/^/v1/old/, '/v2/new')

Типичные ошибки и решения

• 404 ошибки: Проверьте target-адрес и префикс пути
• CORS сохраняется: Убедитесь, что changeOrigin: true установлен
• Не работают куки: Добавьте cookieDomainRewrite: 'localhost'
• Медленные запросы: Отключите SSL для локального развития (secure: false)

FAQ: Частые вопросы о Vite Proxy

Как проверить, работает ли прокси?
Откройте вкладку Network в DevTools. Запросы к /api будут показывать Origin как ваш dev-сервер (обычно localhost:5173).

Можно ли использовать HTTPS для прокси?
Да. Укажите target как https-адрес и добавьте secure: false для самоподписанных сертификатов.

Почему не переносятся заголовки авторизации?
Добавьте явное разрешение: headers: { Authorization: 'Bearer ...' } или настройте CORS на бэкенде.

Как проксировать статику?
Используйте правило без rewrite: '/assets': { target: 'http://cdn.example.com' }.

Отличается ли прокси в Vite 2 и Vite 5?
Базовая настройка идентична. Vite 5 улучшил обработку WebSocket и ошибок.

Заключение

Прокси в Vite Dev Server — обязательный инструмент для современных SPA. Он решает проблемы CORS, упрощает работу с API и ускоряет разработку. Используйте rewrite для сложных сценариев, настраивайте WebSocket для real-time приложений и всегда проверяйте конфигурацию через DevTools. Интеграция занимает 5 минут, но экономит часы отладки!