## Что Такое Прокси в Vite и Зачем Он Нужен?
Vite — современный инструмент для фронтенд-разработки, который ускоряет сборку проектов. Прокси-сервер в dev-режиме Vite решает проблему CORS (Cross-Origin Resource Sharing), перенаправляя запросы к API через development-сервер. Это позволяет:
* Тестировать приложение локально без ошибок доступа
* Эмулировать рабочие API-эндпоинты
* Упростить работу с микросервисной архитектурой
Без прокси запросы к внешним доменам блокируются браузером из-за политики безопасности.
## Как Настроить Прокси в Vite: Пошаговая Инструкция
Добавьте прокси в файл `vite.config.js`:
“`javascript
export default {
server: {
proxy: {
‘/api’: {
target: ‘https://real-api-domain.com’,
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ”)
}
}
}
}
“`
Ключевые параметры:
1. **target**: URL бэкенд-сервера
2. **changeOrigin**: изменяет заголовок `Host` на целевой домен (обязательно `true` для CORS)
3. **rewrite**: переписывает путь (например, удаляет префикс `/api`)
После перезапуска сервера (`npm run dev`) запросы к `/api/users` будут перенаправлены на `https://real-api-domain.com/users`.
## Распространённые Ошибки Прокси и Vite Server Proxy Debug
### Ошибка 404 (Not Found)
**Причина**: Неправильный путь в `rewrite` или `target`.
**Решение**:
– Проверьте совпадение префикса (`’/api’`)
– Используйте логгирование:
“`javascript
proxy: {
‘/api’: {
target: ‘https://api.example.com’,
logger: console
}
}
“`
### CORS-Ошибки в Браузере
**Причина**: Заголовки `Origin` не передаются.
**Решение**:
– Убедитесь, что `changeOrigin: true`
– Добавьте настройку headers:
“`javascript
configure: (proxy, options) => {
proxy.on(‘proxyReq’, (proxyReq) => {
proxyReq.setHeader(‘Origin’, options.target)
})
}
“`
### Прокси Не Работает После Обновления
**Причина**: Кэш Vite.
**Решение**:
1. Остановите сервер (`Ctrl+C`)
2. Удалите папку `node_modules/.vite`
3. Перезапустите проект
## Советы по Отладке Прокси в Vite
1. **Включите Детальное Логгирование**
“`javascript
server: {
proxy: {
‘/api’: {
target: ‘https://your-api.com’,
logLevel: ‘debug’
}
}
}
“`
2. **Проверяйте Сетевые Запросы**
– Откройте вкладку **Network** в DevTools (F12)
– Фильтруйте по `/api`
– Анализируйте заголовки `Request URL` и `Response`
3. **Тестируйте с Помощью cURL**
“`bash
curl -v http://localhost:5173/api/test –proxy ”
“`
4. **Используйте Middleware для Декодирования**
Добавьте в конфиг:
“`javascript
configure: (proxy) => {
proxy.on(‘proxyRes’, (proxyRes) => {
console.log(‘RAW Response:’, proxyRes.headers)
})
}
“`
## Часто Задаваемые Вопросы (FAQ)
### Почему прокси Vite не перенаправляет запросы?
Проверьте:
– Совпадение пути (регистр символов в `’/api’`)
– Актуальность версии Vite (≥2.7)
– Отсутствие опечаток в `target`
### Как обрабатывать WebSockets через прокси?
Добавьте опцию `ws: true`:
“`javascript
proxy: {
‘/socket’: {
target: ‘ws://your-websocket-server’,
ws: true
}
}
“`
### Можно ли использовать несколько прокси в одном проекте?
Да! Конфигурируйте несколько путей:
“`javascript
proxy: {
‘/api’: { target: ‘https://api.com’ },
‘/images’: { target: ‘https://cdn.com’ }
}
“`
### Как отладить SSL-ошибки?
При проблемах с HTTPS:
1. Установите `secure: false` в настройках прокси
2. Проверьте сертификаты бэкенда командой:
“`bash
openssl s_client -connect api-domain.com:443
“`
### Vite проксирует статику, а не API. Что делать?
Измените порядок middleware в конфиге. Прокси должен объявляться ДО статики. Используйте плагин `vite-plugin-proxy-middleware` для точного контроля.
Правильная настройка прокси в Vite устраняет боли разработки и ускоряет работу. Для сложных сценариев изучите документацию по http-proxy-middleware — основе прокси Vite.
