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

Что такое Vite Dev Server и зачем нужен прокси API?

Vite — современный инструмент для фронтенд-разработки, известный молниеносной скоростью запуска dev-сервера. Однако при работе с API часто возникает проблема CORS (Cross-Origin Resource Sharing), когда браузер блокирует запросы к внешним доменам. Именно здесь на помощь приходит vite dev server proxy api — механизм перенаправления запросов через dev-сервер для обхода ограничений безопасности во время разработки.

Базовые настройки прокси в Vite

Конфигурация прокси осуществляется в файле vite.config.js. Рассмотрим простой пример для перенаправления запросов к API:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://ваш-бэкенд.ru',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
}

• target: URL бэкенд-сервера
• changeOrigin: изменяет заголовок Origin на целевой домен (обязательно для CORS)
• rewrite: переписывает путь, удаляя префикс /api

Расширенные конфигурации прокси

Обработка WebSockets

Для корректной работы WebSockets добавьте опцию ws: true:

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

Несколько прокси-правил

Можно определить несколько эндпоинтов одновременно:

proxy: {
  '/api': { target: 'https://api.example.com' },
  '/images': { target: 'https://cdn.example.com' }
}

Кастомные заголовки

Добавление авторизации или других заголовков:

proxy: {
  '/secure': {
    target: 'https://secure-api.com',
    headers: {
      Authorization: 'Bearer token123'
    }
  }
}

Решение распространенных проблем с прокси

• Запросы не перенаправляются: Проверьте совпадение пути в proxy-правиле. Используйте абсолютные пути в запросах (/api/data вместо api/data).
• Ошибки CORS остаются: Убедитесь, что changeOrigin: true установлен. Проверьте настройки сервера для разрешения домена Vite (обычно localhost:5173).
• WebSockets не работают: Добавьте ws: true и перезапустите сервер. Проверьте поддержку WS на бэкенде.
• Прокси не работает в продакшене: Помните, что vite dev server proxy api функционирует только в режиме разработки (vite dev). Для продакшена настройте NGINX или аналоги.

Часто задаваемые вопросы (FAQ)

Чем отличается Vite Proxy от Webpack DevServer Proxy?

Vite использует http-proxy — ту же библиотеку, что и Webpack, поэтому функционал идентичен. Ключевое отличие — скорость обработки запросов благодаря архитектуре Vite.

Как отладить прокси-запросы?

Добавьте в конфигурацию configure: (proxy, options) => { proxy.on('proxyReq', (req) => console.log('Proxy:', req.path)) } для логирования всех запросов в консоль.

Можно ли использовать HTTPS для целевого сервера?

Да, укажите https:// в target. При ошибках сертификата добавьте secure: false (только для разработки!).

Работает ли прокси с SSR в Vite?

Да, но для серверного рендеринга настройки прокси должны дублироваться в SSR-мидлварах (например, в server.middlewareMode).

Как перенаправить все запросы кроме статики?

Используйте регулярное выражение:

proxy: {
  '^(?!/src|/@vite).*': {
    target: 'http://localhost:8080'
  }
}

Правильная настройка vite dev server proxy api ускоряет разработку, избавляя от CORS-ошибок и эмулируя продакшен-окружение. Экспериментируйте с опциями rewrite, headers и ws, чтобы адаптировать прокси под вашу инфраструктуру.