Webpack Dev Server Proxy All Requests: Полное Руководство с Примерами и FAQ

Что такое Webpack Dev Server и зачем проксировать запросы?

Webpack Dev Server (WDS) — инструмент для разработки, предоставляющий live reloading и горячую замену модулей. Проксирование запросов решает ключевую проблему: обход CORS (Cross-Origin Resource Sharing) ошибок при работе с API. Когда фронтенд и бэкенд работают на разных доменах или портах, браузер блокирует запросы. Прокси WDS перенаправляет запросы через сервер разработки, создавая иллюзию единого источника.

Настройка прокси для всех запросов в Webpack Dev Server

Для проксирования всех запросов добавьте в webpack.config.js секцию devServer.proxy с конфигурацией:

• Установите target — URL вашего бэкенд-сервера (например, http://localhost:3000)
• Используйте pathRewrite — опционально для изменения путей
• Активируйте changeOrigin: true — для корректной работы с виртуальными хостами

Пример конфигурации прокси

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '**': {  // ** означает "все пути"
        target: 'http://your-backend-domain.com',
        changeOrigin: true,
        secure: false // для HTTPS с самоподписанными сертификатами
      }
    }
  }
};

Этот код перенаправляет ВСЕ HTTP-запросы на указанный target. Для тестирования API:

1. Запустите WDS: webpack serve
2. Обращайтесь к API через localhost:8080/api/data (запрос уйдет на бэкенд)

Расширенные настройки прокси

• Фильтрация путей: Используйте контекст для выборочного проксирования:

  proxy: {
    '/api/**': { 
      target: 'http://api.example.com',
      pathRewrite: { '^/api': '' } // удаляет /api из URL
    }
  }

• WebSocket поддержка: Добавьте ws: true для проксирования WebSockets
• Обходные пути: bypass-функция для кастомной логики перенаправления

Решение распространенных проблем

• Запросы не проксируются: Проверьте синтаксис конфига и перезапустите WDS. Убедитесь, что нет опечаток в target
• Ошибки CORS остаются: Добавьте headers: { 'Access-Control-Allow-Origin': '*' } в конфиг прокси
• HTTPS ошибки: При работе с самоподписанными сертификатами используйте secure: false
• Медленные запросы: Отключите агрессивные опции like logLevel: 'debug' для диагностики

Заключение

Проксирование всех запросов через Webpack Dev Server устраняет CORS-ограничения и ускоряет разработку. Конфигурация с '**' обеспечивает универсальное решение для любых API. Помните: прокси работает ТОЛЬКО в режиме разработки. Для продакшена настройте аналогичные правила на уровне Nginx или облачного балансировщика.

Часто задаваемые вопросы (FAQ)

Как проверить, работает ли прокси?

Откройте DevTools → вкладка Network. При запросе к localhost:8080/api в Initiator будет указан «Proxy».

Можно ли проксировать несколько доменов?

Да! Добавьте несколько ключей в объект proxy:

proxy: {
  '/api1/**': { target: 'http://domain1.com' },
  '/api2/**': { target: 'http://domain2.com' }
}

Почему не проксируются POST-запросы?

WDS проксирует все методы HTTP по умолчанию. Проверьте changeOrigin: true и отсутствие CORS preflight-ошибок.

Как отключить проверку SSL?

Добавьте secure: false в конфиг прокси для игнорирования ошибок сертификатов.

Работает ли с GraphQL?

Да! Настройте прокси для эндпоинта GraphQL (например, /graphql). Поддерживаются все типы запросов.