## Что Такое Vite Server Proxy Target?
Vite Server Proxy Target — механизм перенаправления запросов во время разработки. Он позволяет проксировать API-вызовы с фронтенд-сервера Vite на другой сервер (например, бэкенд), решая проблемы CORS и упрощая работу с микросервисами. Это особенно полезно при использовании таких фреймворков, как React или Vue, где фронтенд и бэкенд работают на разных портах.
## Зачем Нужен Прокси в Vite?
Основные причины использования:
– **Обход CORS**: Браузеры блокируют запросы между разными доменами. Прокси эмулирует единый источник.
– **Локальная разработка**: Тестирование API без развёртывания бэкенда.
– **Безопасность**: Сокрытие реальных адресов серверов.
– **Упрощение путей**: Замена сложных URL на понятные алиасы.
## Как Настроить Proxy в vite.config.js
Добавьте блок `server.proxy` в конфигурационный файл Vite:
“`javascript
// vite.config.js
export default {
server: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’, // Адрес вашего бэкенда
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ”)
}
}
}
}
“`
**Ключевые параметры:**
– `target`: Базовый URL сервера-назначения (обязательный).
– `changeOrigin`: Изменяет заголовок `Origin` на значение target (по умолчанию `false`).
– `rewrite`: Функция для перезаписи пути перед отправкой.
## Практические Примеры Конфигурации
### Пример 1: Прокси для REST API
“`javascript
proxy: {
‘/users’: {
target: ‘https://jsonplaceholder.typicode.com’,
changeOrigin: true
}
}
“`
Запрос к `/users` перенаправится на `https://jsonplaceholder.typicode.com/users`.
### Пример 2: Работа с WebSockets
“`javascript
proxy: {
‘/socket.io’: {
target: ‘ws://localhost:4000’,
ws: true
}
}
“`
Параметр `ws: true` активирует проксирование WebSocket-соединений.
### Пример 3: Множественные пути
“`javascript
proxy: {
‘/api’: { target: ‘http://localhost:5000’ },
‘/images’: { target: ‘http://storage-server.com’ }
}
“`
## Решение Распространённых Ошибок
1. **CORS-ошибки после настройки**:
– Убедитесь, что `changeOrigin: true`.
– Проверьте наличие опечаток в путях.
2. **Прокси игнорирует запросы**:
– Перезапустите сервер Vite командой `vite –force`.
– Убедитесь, что путь запроса совпадает с ключом в конфиге (например, `/api`).
3. **Ошибки SSL**:
– Для HTTPS-таргетов добавьте `secure: false`.
## FAQ: Часто Задаваемые Вопросы
**Q: Можно ли проксировать несколько target-серверов?**
A: Да, просто добавьте дополнительные ключи в объект `proxy`.
**Q: Работает ли прокси в продакшн-сборке?**
A: Нет, Vite Proxy актуален только в режиме разработки (`vite dev`). Для продакшна настройте прокси на уровне Nginx или облачного сервиса.
**Q: Как обрабатывать куки при проксировании?**
A: Установите `cookieDomainRewrite: ”` в конфигурации, чтобы куки корректно передавались между доменами.
**Q: Поддерживаются ли HTTPS-таргеты?**
A: Да, укажите `https://` в `target`. При ошибках сертификата используйте `secure: false`.
**Q: Можно ли использовать переменные окружения?**
A: Да, например:
“`javascript
target: process.env.BACKEND_URL || ‘http://localhost:3000’
“`
## Заключение
Vite Server Proxy Target — мощный инструмент для упрощения разработки. Он устраняет сложности CORS, позволяет гибко настраивать маршруты и интегрируется с любым бэкендом. Используйте примеры из этой статьи, чтобы настроить прокси за 5 минут и сосредоточиться на написании кода, а не решении инфраструктурных проблем.
