Webpack Dev Server Proxy: Динамическое изменение target в настройках проксирования

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

Webpack Dev Server Proxy — это инструмент, который перенаправляет запросы с локального сервера разработки на другой сервер (например, бэкенд API). Это особенно полезно для избежания CORS-ошибок и тестирования взаимодействия фронтенда с API в режиме реального времени. Динамическое изменение target позволяет гибко управлять адресами проксирования в зависимости от условий.

Базовая настройка прокси в Webpack

В файле webpack.config.js добавьте раздел devServer.proxy:

devServer: {
  proxy: {
    '/api': {
      target: 'https://example.com',
      changeOrigin: true,
    }
  }
}

Этот код перенаправляет все запросы к /api на указанный target.

Динамический target: реализация и примеры

Используйте функцию вместо строки для target, чтобы динамически менять адрес:

proxy: {
  '/api': {
    target: (req) => {
      const env = req.headers.env || 'development';
      return env === 'staging' 
        ? 'https://staging-api.com' 
        : 'https://dev-api.com';
    },
    changeOrigin: true
  }
}

Этот пример выбирает сервер на основе заголовка запроса.

Практические кейсы использования

• Тестирование разных API-окружений (dev/staging/prod)
• Локальная разработка с микросервисной архитектурой
• A/B-тестирование эндпоинтов

Типичные ошибки и решения

1. Прокси не работает: проверьте параметр changeOrigin и CORS-настройки сервера
2. Некорректный target: используйте console.log внутри функции для отладки
3. Проблемы с HTTPS: добавьте secure: false для самоподписанных сертификатов

FAQ

Q: Можно ли использовать переменные окружения в target?
A: Да, через process.env.API_URL в конфигурации.

Q: Как обрабатывать WebSocket-соединения?
A: Добавьте ws: true в настройки прокси.

Q: Поддерживаются ли регулярные выражения?
A: Да, используйте паттерны типа pathRewrite для сложных маршрутов.

Q: Как отключить проверку SSL?
A: Установите secure: false в конфиге прокси.

Q: Можно ли проксировать несколько путей?
A: Да, создайте отдельные конфигурации для каждого пути.