## Что такое webpack-dev-server proxy и ошибка ECONNREFUSED
Webpack-dev-server — инструмент для разработки, позволяющий запускать локальный сервер с горячей перезагрузкой. Его прокси-функция перенаправляет запросы API на бэкенд-сервер, избегая проблем CORS. Ошибка `ECONNREFUSED` возникает, когда прокси не может подключиться к целевому серверу, указывая на сетевое или конфигурационное препятствие.
## Основные причины ошибки ECONNREFUSED
– **Неверный адрес или порт бэкенда**: Указан несуществующий IP, домен или закрытый порт.
– **Сервер бэкенда не запущен**: Локальный сервер (например, Node.js или Django) не активен во время запроса.
– **Блокировка фаерволом**: Системный или сетевой фаервол запрещает соединение.
– **Опечатки в конфиге**: Ошибки в синтаксисе объекта `proxy` в `webpack.config.js`.
– **Проблемы с VPN/Прокси**: Корпоративные сети перенаправляют трафик некорректно.
## Как исправить ECONNREFUSED: Пошаговые решения
1. **Проверьте статус бэкенд-сервера**
Убедитесь, что ваш API-сервер запущен. Для локального сервера:
“`bash
curl http://localhost:3000/api/test
“`
2. **Валидация конфигурации прокси**
В `webpack.config.js` укажите точный адрес:
“`javascript
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’, // Проверьте порт!
secure: false,
}
}
}
“`
3. **Отключите фаервол временно**
Для Windows:
– Откройте «Брандмауэр Защитника Windows» → «Разрешение взаимодействия с приложением».
Для macOS/Linux:
“`bash
sudo ufw disable
“`
4. **Используйте IP вместо localhost**
Если бэкенд на другом устройстве, замените `localhost` на локальный IP (например, `192.168.1.5`).
5. **Проверьте корпоративные ограничения**
Отключите VPN или настройте исключения в системном прокси.
## Пример рабочей конфигурации прокси
“`javascript
module.exports = {
// …
devServer: {
hot: true,
proxy: {
‘/api’: {
target: ‘http://localhost:5000’,
changeOrigin: true,
logLevel: ‘debug’, // Логируйте запросы для диагностики
pathRewrite: { ‘^/api’: ” },
}
}
}
};
“`
После изменений перезапустите webpack-dev-server!
## Частые вопросы (FAQ)
### Почему прокси не работает после клонирования репозитория?
Частая причина — различия в переменных окружения. Проверьте `.env`-файлы или настройки в `package.json`.
### Как логировать прокси-запросы для отладки?
Добавьте в конфиг:
“`javascript
proxy: {
‘/api’: {
target: ‘http://your-backend’,
logLevel: ‘debug’
}
}
“`
Логи появятся в консоли запущенного dev-server.
### ECONNREFUSED возникает только в Docker. Что делать?
Используйте имя сервиса вместо `localhost` (например, `target: ‘http://backend:3000’`). Убедитесь, что сети Docker связаны через `network_mode`.
### Ошибка сохраняется, хотя сервер доступен через браузер?
Возможно, CORS-политика блокирует запрос. Добавьте в бэкенд заголовки:
“`
Access-Control-Allow-Origin: *
“`
Или активируйте `changeOrigin: true` в прокси.
### Помогает ли смена порта?
Да! Если бэкенд на порту 3000, а прокси пытается использовать 8080, измените `target` на актуальный порт. Проверьте занятость портов командой:
“`bash
lsof -i :3000
“`
## Заключение
Ошибка `ECONNREFUSED` в webpack-dev-server proxy обычно решается проверкой:
– Активности бэкенд-сервера,
– Точности адреса в `target`,
– Сетевых ограничений.
Используйте `logLevel: ‘debug’` для детальной диагностики. Большинство проблем устраняются за 5 минут, если следовать инструкциям выше.
