## Зачем нужен прокси-сервер в Angular?
При разработке Angular-приложений часто возникает проблема CORS (Cross-Origin Resource Sharing), когда фронтенд на localhost пытается получить данные с внешнего API. Прокси-сервер решает эту задачу, перенаправляя запросы через development-сервер Angular CLI. Это упрощает работу с бэкендом, имитирует production-окружение и позволяет обходить ограничения безопасности браузера во время разработки.
## Пошаговая настройка прокси в Angular
1. **Создайте proxy.conf.json файл** в корне проекта (рядом с angular.json).
2. Добавьте базовую конфигурацию:
“`json
{
“/api/*”: {
“target”: “https://ваш-бэкенд-домен.com”,
“secure”: false,
“changeOrigin”: true,
“logLevel”: “debug”
}
}
“`
3. Обновите angular.json, добавив параметр `proxyConfig` в раздел serve:
“`json
“serve”: {
“builder”: “@angular-devkit/build-angular:dev-server”,
“options”: {
“proxyConfig”: “proxy.conf.json”
}
}
“`
4. Запустите приложение командой `ng serve`.
## Расширенная конфигурация прокси-файла
Настройте сложные сценарии через контексты и middleware-функции:
– **Перенаправление путей**:
“`json
“/auth”: {
“target”: “http://auth-server:3000”,
“pathRewrite”: {“^/auth”: “”}
}
“`
– **Обработка WebSocket**:
“`json
“/socket.io/*”: {
“target”: “ws://localhost:3001”,
“ws”: true
}
“`
– **Кастомизация заголовков**:
“`json
“headers”: {
“X-Custom-Header”: “angular-proxy”
}
“`
## Практические примеры использования
**Пример 1: Работа с REST API**
“`typescript
// В сервисе Angular
fetchData() {
return this.http.get(‘/api/users’); // Запрос перенаправится на target/proxy
}
“`
**Пример 2: Обход CORS для внешних сервисов**
“`json
{
“/weather/*”: {
“target”: “https://api.weatherapi.com”,
“changeOrigin”: true
}
}
“`
## Ограничения и лучшие практики
– Работает **только в режиме разработки** (`ng serve`)
– Для продакшена настройте прокси через Nginx или облачные решения
– Всегда используйте `changeOrigin: true` для корректной передачи Host-заголовка
– Избегайте хранения чувствительных данных в proxy.conf.json
## Часто задаваемые вопросы (FAQ)
**Вопрос: Почему прокси не работает после настройки?**
Ответ: Проверьте:
1. Корректность пути к proxy.conf.json в angular.json
2. Соответствие URL в запросе (например, `/api/endpoint`)
3. Отсутствие опечаток в target-адресе
**Вопрос: Как обрабатывать HTTPS-сертификаты?**
Ответ: При ошибках SSL установите `”secure”: false`. Никогда не используйте это в production!
**Вопрос: Можно ли использовать несколько прокси-файлов?**
Ответ: Да, объедините их через `–proxy-config`:
“`bash
ng serve –proxy-config proxy.dev.json –proxy-config proxy.api.json
“`
**Вопрос: Чем заменить прокси в production?**
Ответ: Настройте:
– Обратный прокси (Nginx/Apache)
– CORS на бэкенд-сервере
– Cloudflare Workers
**Вопрос: Как логировать прокси-запросы?**
Ответ: Добавьте `”logLevel”: “debug”` в конфиг. Логи будут в консоли запуска `ng serve`.
## Заключение
Настройка прокси-сервера в Angular — критически важный этап для комфортной разработки. Используя proxy.conf.json, вы избегаете проблем с CORS, централизуете управление запросами и эмулируете рабочее окружение. Помните: это инструмент для разработки, а для продакшена применяйте серверные решения вроде Nginx. Экспериментируйте с pathRewrite и обработкой ошибок, чтобы создать идеальный workflow!
