Stage 5. Browser to Server Flow
Когда пользователь нажимает кнопку в браузере, до бизнес-метода на сервере запрос проходит несколько сетевых и инфраструктурных слоев. Если смотреть только на код endpoint-а, легко пропустить настоящую причину ошибки. Поэтому полезно понимать весь путь запроса целиком: от браузера и DNS до gateway, backend-сервиса и ответа обратно.
1. Полная цепочка запроса
Обычно путь выглядит так:
- Браузер формирует запрос: URL, метод, заголовки, cookie, body.
- DNS преобразует домен в IP-адрес.
- Запрос проходит через edge-слой: CDN/WAF.
- Нагрузку распределяет Load Balancer.
- API Gateway применяет правила: auth, rate limit, маршрутизация.
- Backend API выполняет бизнес-логику и обращается к БД/кэшу.
- Ответ возвращается обратно по цепочке к браузеру.
2. Что делает каждый слой
| Слой | Роль в цепочке | Типичные проблемы |
|---|---|---|
| Browser | Создаёт HTTP-запрос и применяет политики безопасности | CORS-блокировка, cookie policy, stale cache |
| DNS | Разрешает доменное имя в IP | Неверная запись, медленное время резолвинга |
| CDN/WAF | Ускоряет доставку и фильтрует трафик | Старая закэшированная версия, блокировка правилом |
| Load Balancer | Распределяет запросы по инстансам | Неправильный health-check, перекос нагрузки |
| API Gateway | Проверяет токен, лимиты, маршруты | Потеря заголовков, лишние ограничения |
| API Service | Выполняет бизнес-логику | Ошибки в коде, конфликт данных |
| DB/Cache | Хранит и отдаёт данные | Таймауты, устаревшие данные |
3. Почему 200 OK не всегда означает успех для пользователя
Даже если backend вернул 200, браузер может не дать JavaScript доступ к ответу. Классический случай: API технически отвечает корректно, но CORS-заголовки неполные, и браузер блокирует чтение body. Из-за этого пользователь видит "ничего не работает", хотя сервер в логах выглядит рабочим.
4. Через какие сетевые компоненты идёт запрос
Ниже упрощённая схема для запоминания:
flowchart LR
A[Browser] --> B[DNS]
B --> C[CDN/WAF]
C --> D[Load Balancer]
D --> E[API Gateway]
E --> F[API Service]
F --> G[(DB/Cache)]
G --> F
F --> E
E --> D
D --> C
C --> A
Эта цепочка может быть длиннее в реальном проде, но базовая логика почти всегда такая: edge-уровень, маршрутизация, бизнес-сервис, данные, обратный ответ.
5. Мини-чеклист отладки по слоям
- В DevTools проверить
Network,Headers,Timingи preflightOPTIONS. - Сверить, какие заголовки реально ушли и вернулись (
Origin,Authorization,Set-Cookie,Cache-Control). - Проверить
X-Request-Idв gateway и backend-логах. - Убедиться, что CDN/прокси не вернули старый ответ из кэша.
- Только после этого разбирать бизнес-код endpoint-а.
Практический сценарий
Команда видит, что GET /profile стабильно возвращает 200, но SPA не обновляет экран после логина. Разбор показал, что на API Gateway не прокидывался заголовок Access-Control-Allow-Credentials, и браузер блокировал доступ к ответу при запросе с cookie. После правки CORS-политики, очистки edge-кэша и добавления e2e-проверки сценарий стал стабильным. Этот пример показывает главное: в вебе работает не только endpoint, а вся цепочка от браузера до сервера и обратно.