Что такое Vite Proxy и зачем он нужен при разработке
Vite — современный инструмент для фронтенд-разработки, известный молниеносной скоростью. Прокси-сервер в Vite решает критическую проблему CORS (Cross-Origin Resource Sharing) при работе с API. Когда фронтенд (localhost:3000) обращается к бэкенду (например, api.example.com), браузер блокирует запросы из соображений безопасности. Прокси перенаправляет такие запросы через dev-сервер, создавая иллюзию одного источника данных.
Пошаговая настройка прокси в vite.config.js
Конфигурация прокси осуществляется через файл vite.config.js. Рассмотрим базовый пример:
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'https://your-backend-domain.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, '')
}
}
}
}Ключевые параметры:
- target: URL бэкенд-сервера
- changeOrigin: изменяет заголовок Origin на target (обязательно для большинства API)
- rewrite: переписывает путь (в примере удаляет префикс /api)
Особенности работы прокси при сборке (build)
Важно понимать: прокси работает ТОЛЬКО в dev-режиме (vite dev). При сборке проекта (vite build) эти настройки игнорируются. Для продакшена нужно:
- Настроить reverse proxy (Nginx, Apache)
- Использовать относительные пути в запросах
- Конфигурировать environment variables через
.env-файлы
Пример структуры окружения:
// .env.development
VITE_API_URL=/api
// .env.production
VITE_API_URL=https://production-api.comТипичные ошибки и решения
- 404 ошибки: Проверьте rewrite правила и наличие слешей в путях
- CORS в продакшене: Настройте заголовки Access-Control-Allow-Origin на бэкенде
- Медленные запросы: Убедитесь, что target указывает на локальный сервер при разработке
- HTTPS проблемы: Добавьте
secure: falseв конфиг при использовании самоподписанных сертификатов
Продвинутые сценарии проксирования
Для сложных конфигураций используйте:
proxy: {
'/graphql': {
target: 'http://localhost:4000',
ws: true // для WebSocket
},
'/uploads': {
target: 'http://cdn.example.com',
bypass: (req) => req.method === 'OPTIONS' ? null : undefined
}
}Возможности:
- Проксирование WebSocket
- Кастомная логика через функцию bypass
- Обработка preflight-запросов (OPTIONS)
FAQ: Ответы на частые вопросы
Работает ли прокси с HTTPS?
Да, укажите target: 'https://...'. Для некорпоративных сертификатов добавьте secure: false.
Как тестировать прокси в production-сборке?
Используйте локальные серверы типа serve -s dist вместе с Nginx или настройте тестовое окружение через Docker.
Можно ли проксировать несколько доменов?
Да, просто добавьте дополнительные ключи в объект proxy:
proxy: {
'/api': { target: 'http://backend:3000' },
'/images': { target: 'http://cdn:8080' }
}Почему прокси не работает после обновления Vite?
Проверьте документацию: в версиях Vite 3+ изменился синтаксис конфигурации сервера.
Как отладить прокси-запросы?
Добавьте в конфиг: configure: (proxy, options) => { proxy.on('error', console.error) } для логирования ошибок.
