Настройка Vite Server Proxy для WebSocket (ws): Полное Руководство

Что такое Vite Server Proxy и зачем ему WebSocket

Vite — современный инструмент для фронтенд-разработки, известный своей скоростью. Его встроенный прокси-сервер перенаправляет API-запросы во время разработки, избегая проблем с CORS. Но когда речь заходит о WebSocket (ws), многие разработчики сталкиваются с трудностями: соединения не устанавливаются, данные не передаются. Настройка proxy для ws в Vite решает эти проблемы, обеспечивая стабильную работу с сокетами при локальной разработке.

Пошаговая настройка WebSocket Proxy в Vite

Для корректной работы с WebSocket через Vite нужно модифицировать vite.config.js. Вот базовый пример:

// vite.config.js
export default {
  server: {
    proxy: {
      '/socket': {
        target: 'ws://your-backend-url',
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace(/^/socket/, '')
      }
    }
  }
}

• target: URL вашего WebSocket-сервера
• ws: true: критически важный параметр для поддержки WebSocket
• rewrite: опционально изменяет путь запроса
• changeOrigin: изменяет заголовок Origin для обхода CORS

Типичные сценарии конфигурации

Соединение с локальным сервером

Если бэкенд работает на localhost:3000:

proxy: {
  '/ws': {
    target: 'ws://localhost:3000',
    ws: true
  }
}

Безопасное соединение (wss)

Для HTTPS/WSS добавьте параметр secure: false при использовании самоподписанных сертификатов:

proxy: {
  '/wss': {
    target: 'wss://your-secure-domain.com',
    ws: true,
    secure: false
  }
}

Проксирование нескольких эндпоинтов

Можно определить несколько правил для разных WebSocket-путей:

proxy: {
  '/chat': { target: 'ws://chat-service', ws: true },
  '/notifications': { target: 'ws://notification-service', ws: true }
}

Отладка и решение проблем

• Соединение не устанавливается: проверьте параметр ws: true и отсутствие опечаток в target
• Ошибки SSL: используйте secure: false для dev-среды
• Обрыв соединения: увеличьте таймаут через timeout: 60000
• CORS блокирует запрос: активируйте changeOrigin: true

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

Почему WebSocket не работает через Vite Proxy?

Основные причины: забытый параметр ws: true, неправильный URL target или блокировка CORS. Всегда проверяйте консоль браузера и серверные логи.

Как проксировать только WebSocket, а не HTTP?

Vite автоматически обрабатывает ws-запросы при наличии ws: true. HTTP-запросы к тому же пути будут проксироваться отдельно.

Работает ли это с Socket.io?

Да! Для Socket.io укажите путь сервера в target и убедитесь, что клиент использует тот же путь, что и в proxy.

Нужно ли перезапускать Vite при изменении конфига?

Да, изменения в vite.config.js требуют перезапуска dev-сервера.

Заключение

Настройка proxy для WebSocket в Vite — ключ к эффективной работе с реальным временем в приложениях. Всего несколько строк конфигурации устранят проблемы с соединением, CORS и маршрутизацией. Используйте примеры из этой статьи как отправную точку, адаптируя их под вашу инфраструктуру. Помните: параметр ws: true — обязателен, а детализация правил проксирования предотвратит конфликты маршрутов.