Webpack Dev Server Proxy для решения CORS: Полное руководство с примерами

Введение: Борьба с CORS в разработке

При создании современных веб-приложений разработчики часто сталкиваются с ошибками CORS (Cross-Origin Resource Sharing) при обращении к API. Это происходит, когда фронтенд (localhost:3000) пытается получить данные с сервера (например, api.example.com), что блокируется политикой безопасности браузеров. Webpack Dev Server Proxy — элегантное решение этой проблемы. Оно перенаправляет запросы через development-сервер, маскируя кросс-доменные вызовы под same-origin. В этой статье вы узнаете, как настроить прокси для обхода CORS, используя webpack-dev-server, с практическими примерами и ответами на частые вопросы.

Что такое CORS и почему он блокирует запросы?

CORS — механизм безопасности, предотвращающий межсайтовые атаки. Браузер автоматически блокирует HTTP-запросы между разными доменами без явного разрешения сервера. Типичные симптомы:

• Ошибка “No ‘Access-Control-Allow-Origin’ header” в консоли
• Сбои при вызовах API во время разработки
• Работоспособность запросов через Postman, но не в браузере

Webpack Dev Server решает это, становясь “посредником”: запросы к /api отправляются на целевой сервер, а ответ возвращается как same-origin.

Настройка прокси в Webpack Dev Server: Пошаговое руководство

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

1. Установите webpack-dev-server: npm install --save-dev webpack-dev-server
2. Добавьте в конфиг:

   module.exports = {
     // ...
     devServer: {
       proxy: {
         '/api': {
           target: 'https://real-api-domain.com',
           changeOrigin: true,
           secure: false
         }
       }
     }
   };

3. Запустите сервер: webpack serve

Ключевые параметры:

• target: URL сервера API
• changeOrigin: меняет заголовок Host на целевой домен (обязательно!)
• secure: отключает проверку SSL-сертификатов для HTTPS

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

Пример 1: Проксирование нескольких путей

proxy: {
  '/api': {
    target: 'http://backend:8080',
    pathRewrite: { '^/api': '' }
  },
  '/images': {
    target: 'http://cdn.example.com'
  }
}

pathRewrite удаляет префикс /api из URL.

Пример 2: Обработка WebSockets

proxy: {
  '/socket': {
    target: 'ws://realtime-server.com',
    ws: true
  }
}

Пример 3: Кастомные заголовки

proxy: {
  '/auth': {
    target: 'https://secure-api.com',
    headers: {
      'Authorization': 'Bearer dev_token'
    }
  }
}

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

Почему прокси не работает после настройки?

Проверьте: 1) Корректность пути в /api 2) Наличие changeOrigin: true 3) Отсутствие опечаток в target. Перезапустите dev-server после изменений конфига.

Как отладить проблемы с прокси?

Добавьте logLevel: 'debug' в devServer. В консоли появятся детали запросов. Используйте также инструменты разработчика в браузере (вкладка Network).

Работает ли это с HTTPS API?

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

Можно ли использовать прокси в Create React App?

Да, через src/setupProxy.js без eject. Пример:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use('/api', createProxyMiddleware({ 
    target: 'http://localhost:5000' 
  }));
};

Заключение: Эффективная разработка без CORS-ошибок

Настройка прокси в Webpack Dev Server — must-have навык для фронтенд-разработчиков. Она устраняет головную боль с CORS, ускоряя работу с API. Помните: прокси работает только в development-режиме! Для продакшена настройте CORS корректно на бэкенде или используйте API-шлюз. Экспериментируйте с параметрами вроде pathRewrite и кастомными заголовками, чтобы адаптировать решение под вашу инфраструктуру.