Настройка прокси для бэкенд-сервера в Angular: Полное руководство с примерами

Что такое прокси в Angular и зачем он нужен

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

• Избежать ошибок CORS во время разработки
• Тестировать API без развёртывания бэкенда
• Имитировать разные окружения (dev/stage/prod)
• Упростить работу с относительными путями API

Использование прокси особенно критично при работе с микросервисной архитектурой, где серверы развёрнуты на разных портах или доменах.

Пошаговая настройка прокси в Angular

1. Создайте proxy.conf.json в корне проекта:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

2. Обновите angular.json, добавив в раздел “serve”:

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

3. Запустите приложение командой ng serve
4. Все запросы к /api/users будут перенаправлены на http://localhost:3000/api/users

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

Множественные цели

{
  "/auth": { "target": "http://auth-server:4000" },
  "/api": { "target": "http://api-server:5000" }
}

Перезапись путей

{
  "/backend": {
    "target": "http://localhost:3000",
    "pathRewrite": { "^/backend": "" }
  }
}

Обработка WebSockets

{
  "/socket.io": {
    "target": "ws://localhost:6000",
    "ws": true
  }
}

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

• Прокси не работает: Проверьте путь к конфигу в angular.json и перезапустите сервер
• Ошибки 404: Убедитесь, что target-сервер запущен и путь совпадает с API
• Сброс сессии: Добавьте "cookieDomainRewrite": "localhost" в конфиг
• Медленные запросы: Отключите "logLevel": "debug" в продакшн-режиме

FAQ: Частые вопросы о прокси в Angular

Q: Нужен ли прокси в продакшн-сборке?
A: Нет. Прокси работает только с ng serve. Для продакшна настройте reverse proxy (Nginx, Apache).

Q: Как обрабатывать HTTPS-серверы?
A: Установите "secure": true и добавьте сертификат через "ca" параметр.

Q: Можно ли использовать переменные окружения?
A: Да. Создайте proxy.conf.js вместо JSON и используйте process.env:

module.exports = {
  '/api': { target: process.env.API_URL }
}

Q: Как отладить прокси-запросы?
A: Добавьте "logLevel": "debug" и проверяйте вывод в консоли Angular CLI.

Q: Работает ли с Angular Universal?
A: Нет. Для SSR используйте middleware Express.js для проксирования.

Правильная настройка прокси ускоряет разработку и предотвращает головную боль с CORS. Помните, что это инструмент для dev-режима, а финальное API должно быть настроено через окружения.