Vite Server Proxy Bypass: Полное Руководство по Настройке и Решению Проблем

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

Vite — современный инструмент для фронтенд-разработки, ускоряющий сборку проектов. Proxy bypass в Vite позволяет обходить CORS-ограничения при обращении к API во время разработки. Когда фронтенд и бэкенд работают на разных доменах или портах, браузер блокирует запросы из соображений безопасности. Настройка прокси перенаправляет запросы через dev-сервер Vite, имитируя работу в одном источнике.

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

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

Установите пакет http-proxy: npm install http-proxy-middleware --save-dev
Добавьте в конфиг Vite секцию server.proxy:

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

Ключевые параметры:

target: URL бэкенд-сервера
changeOrigin: подмена заголовка Origin (обязательно для CORS)
rewrite: перезапись пути запроса

Типичные сценарии использования прокси

Работа с несколькими API

Для маршрутизации разных эндпоинтов:

proxy: {
  '/users': { target: 'http://api.example.com' },
  '/products': { target: 'http://api.store.dev' }
}

Обход HTTPS-ошибок

При работе с самоподписанными сертификатами добавьте:

secure: false,
rejectUnauthorized: false

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

Прокси не работает: запросы не перенаправляются

Проверьте совпадение префикса пути (например, /api)
Убедитесь, что бэкенд-сервер запущен
Используйте console.log в хуке configureServer для отладки

Ошибки CORS после настройки прокси

Убедитесь, что в конфиге включены:

changeOrigin: true,
headers: { 'Access-Control-Allow-Origin': '*' }

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

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

Vite использует http-proxy-middleware — тот же пакет, что и Webpack, но с оптимизациями для ES-модулей. Конфигурация практически идентична.

Как обрабатывать WebSockets через прокси?

Добавьте опцию ws: true в конфиг:

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

Можно ли использовать прокси в продакшене?

Нет, Vite Proxy предназначен только для dev-сервера. В продакшене используйте Nginx или облачные решения.

Включите передачу учетных данных:

cookieDomainRewrite: 'localhost',
withCredentials: true

Заключение

Vite Server Proxy Bypass — мощный инструмент для решения CORS-проблем при разработке. Правильная настройка прокси экономит часы отладки и ускоряет интеграцию с бэкендом. Для сложных сценариев используйте кастомные middleware через configureServer. Тестируйте конфигурацию на ранних этапах, чтобы избежать проблем с развертыванием.