Прокси-сервер для Angular CORS: Полное руководство по обходу ошибок

Что такое CORS и почему он блокирует Angular-приложения

Cross-Origin Resource Sharing (CORS) — механизм безопасности браузеров, предотвращающий межсайтовые запросы. Когда Angular-приложение, запущенное на localhost:4200, обращается к API на другом домене (например, api.example.com), браузер блокирует запрос из-за политики одинакового источника. Это вызывает ошибки вида:

• «Access to XMLHttpRequest has been blocked by CORS policy»
• «No ‘Access-Control-Allow-Origin’ header is present»

Как прокси-сервер решает проблемы CORS в Angular

Прокси-сервер выступает посредником: Angular отправляет запросы не напрямую к API, а к локальному серверу разработки, который перенаправляет их на целевой домен. Поскольку запрос идет с одного origin (localhost), CORS-ограничения не применяются. Преимущества подхода:

1. Не требует изменений бэкенда
2. Работает в dev-режиме без деплоя
3. Позволяет тестировать API с локальной машины

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

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

{
  "/api/*": {
    "target": "https://ваш-api-домен.com",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {"^/api": ""}
  }
}

Обновите angular.json:

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

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

Альтернативные методы обработки CORS

• Настройка сервера: Добавление заголовков Access-Control-Allow-Origin на бэкенде.
• Chrome с отключенным CORS: Запуск браузера с флагом --disable-web-security (только для тестов).
• CORS Anywhere: Публичные прокси-сервисы для разработки.

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

Q: Будет ли прокси работать в продакшене?
A: Нет, это решение только для разработки. Для продакшена настройте CORS на сервере или используйте облачный прокси.

Q: Как обрабатывать несколько API-эндпоинтов?
A: Добавьте несколько контекстных путей в proxy.conf.json:

{
  "/api1/*": { "target": "https://api1.com" },
  "/api2/*": { "target": "https://api2.net" }
}

Q: Почему после настройки прокси запросы всё равно блокируются?
A: Проверьте:

1. Корректность пути в proxy.conf.json
2. Перезапуск ng serve
3. Отсутствие опечаток в URL запросов

Q: Можно ли использовать прокси с Angular Universal?
A: Да, но требуется кастомная настройка серверного прокси через Express.js или аналоги.