Angular Proxy Dev Server: Полное руководство по настройке и решению проблем

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

Angular Proxy Dev Server — инструмент Angular CLI, который перенаправляет запросы с локального сервера разработки (обычно на localhost:4200) на внешний API-сервер. Это решает проблему CORS (Cross-Origin Resource Sharing), возникающую при обращении к сторонним доменам во время разработки. Без прокси браузер блокирует такие запросы из соображений безопасности. Proxy Server имитирует работу бэкенда, позволяя фронтенд-разработчикам:

• Тестировать API интеграции без развертывания бэкенда
• Избегать ошибок CORS в development-режиме
• Работать с разными средами (dev/stage/prod) через единую конфигурацию
• Упростить отладку сетевых запросов

Настройка прокси в Angular: пошаговое руководство

Для настройки прокси-сервера в Angular выполните следующие шаги:

1. Создайте файл конфигурации: В корне проекта создайте proxy.conf.json (можно использовать JS-формат для сложных сценариев).
2. Определите правила перенаправления: Укажите целевой сервер и пути. Пример базовой конфигурации:

   {
     "/api/*": {
       "target": "https://ваш-api-сервер.com",
       "secure": false,
       "changeOrigin": true
     }
   }

3. Интегрируйте с Angular CLI: В angular.json добавьте в раздел serve:

   "options": {
     "proxyConfig": "proxy.conf.json"
   }

4. Запустите сервер: Выполните ng serve. Все запросы к /api будут перенаправлены на указанный target.

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

Для сложных случаев используйте JavaScript-файл (proxy.conf.js), позволяющий:

• Динамически менять target в зависимости от окружения
• Обрабатывать пути с помощью регулярных выражений
• Добавлять кастомные заголовки авторизации

module.exports = {
  '/projects/*': {
    target: process.env.API_URL || 'http://localhost:3000',
    pathRewrite: { '^/projects': '' },
    onProxyReq: (proxyReq) => {
      proxyReq.setHeader('Authorization', 'Bearer test-token');
    }
  }
};

Типичные проблемы с Angular Proxy и их решения

• Прокси игнорирует запросы: Проверьте совпадение пути в конфиге. Используйте "logLevel": "debug" в proxy.conf.js для диагностики.
• Ошибки SSL: При работе с HTTPS целевыми серверами установите "secure": false (только для dev!).
• Не применяются изменения: Перезапустите ng serve после правок proxy.conf.json.
• Проблемы с куками: Добавьте "cookieDomainRewrite": "localhost" в конфигурацию.