## Что Такое Прокси-Сервер в Angular и Зачем Он Нужен?
Прокси-сервер в Angular — это инструмент для перенаправления запросов во время разработки, позволяющий обходить проблемы CORS (Cross-Origin Resource Sharing) при обращении к API. Когда фронтенд (localhost:4200) и бэкенд (например, api.example.com) работают на разных доменах, браузер блокирует запросы из соображений безопасности. Прокси-сервер маскирует эти запросы, делая их “однодоменными”. Это ускоряет разработку, устраняет ошибки CORS и упрощает тестирование API без изменения бэкенда.
## Пошаговая Настройка Прокси-Сервера в Angular
Выполните эти шаги для базовой конфигурации:
1. **Создайте файл прокси**: В корне проекта Angular создайте `proxy.conf.json`.
2. **Добавьте правила**:
“`json
{
“/api/*”: {
“target”: “http://your-backend-domain.com”,
“secure”: false,
“changeOrigin”: true,
“logLevel”: “debug”
}
}
“`
3. **Интегрируйте с Angular CLI**: В `angular.json` найдите раздел `serve` и добавьте:
“`json
“options”: {
“proxyConfig”: “proxy.conf.json”
}
“`
4. **Запустите сервер**: Выполните `ng serve`. Все запросы к `/api` перенаправятся на целевой сервер.
Ключевые параметры:
– `target`: URL бэкенд-сервера.
– `changeOrigin`: Изменяет заголовок `Host` на целевой домен (обязательно для CORS).
– `pathRewrite`: Перезаписывает пути (например, удаляет префикс `/api`).
## Примеры Конфигураций для Разных Сценариев
### Множественные API-эндоинты
“`json
{
“/auth/**”: {
“target”: “http://auth-service.com”,
“secure”: false
},
“/data/**”: {
“target”: “http://data-service.com”,
“pathRewrite”: { “^/data”: “” }
}
}
“`
### Обработка WebSocket
“`json
{
“/socket.io/*”: {
“target”: “ws://chat-server.com”,
“ws”: true,
“changeOrigin”: true
}
}
“`
### Обход SSL-ошибок
При использовании HTTPS:
“`json
{
“/api/*”: {
“target”: “https://secure-api.com”,
“secure”: false,
“rejectUnauthorized”: false
}
}
“`
## Решение Распространенных Проблем
– **404 ошибки**: Убедитесь, что путь в `pathRewrite` совпадает с запросом. Используйте `logLevel: “debug”` для проверки.
– **CORS-ошибки в продакшене**: Прокси работает только в dev-режиме (`ng serve`). Для продакшена настройте CORS на бэкенде или используйте Nginx.
– **Медленные запросы**: Добавьте таймаут:
“`json
“timeout”: 30000
“`
– **Ошибки SSL**: Если бэкенд использует самоподписанный сертификат, активируйте `”secure”: false` и `”rejectUnauthorized”: false`.
## Часто Задаваемые Вопросы (FAQ)
**Q: Работает ли прокси в продакшене?**
A: Нет. Это инструмент исключительно для разработки. Для продакшена используйте обратные прокси (Nginx, Apache) или настройте CORS.
**Q: Как протестировать прокси без перезапуска `ng serve`?**
A: Изменения в `proxy.conf.json` требуют перезапуска сервера. Альтернатива — разделить конфиг на модули и использовать `–proxy-config` с флагами.
**Q: Можно ли использовать переменные среды в proxy.conf.json?**
A: Да, через кастомный JS-файл (например, `proxy.conf.js`):
“`javascript
module.exports = {
‘/api/*’: {
target: process.env.API_URL || ‘http://localhost:3000’,
secure: false
}
};
“`
**Q: Почему не работают POST-запросы?**
A: Проверьте заголовки `Content-Type`. Добавьте в конфиг:
“`json
“headers”: {
“Content-Type”: “application/json”
}
“`
**Q: Как ограничить прокси для определенных методов?**
A: Используйте `bypass`-функцию в JS-конфиге для условного перенаправления.
Прокси-сервер — незаменимый инструмент для Angular-разработчиков. Он не только решает CORS, но и имитирует продакшен-окружение, ускоряя цикл разработки. Всегда тестируйте конфигурацию с `logLevel: “debug”` и помните о безопасности при отключении SSL-проверок.
