Что такое HTTP-протокол со стороны Frontend?

Что такое HTTP-протокол со стороны Frontend

HTTP (HyperText Transfer Protocol) — это **протокол прикладного уровня** (уровень 7, Application layer в модели OSI), который определяет правила обмена данными между клиентом (браузером) и сервером.

Ключевые характеристики

Архитектура клиент-сервер:

• Клиент (браузер, мобильное приложение) инициирует запрос
• Сервер обрабатывает запрос и отправляет ответ
• Один цикл = один HTTP-запрос + один ответ

Статусность:

• HTTP не сохраняет состояние между запросами (stateless)
• Для сохранения состояния используются cookies, localStorage, sessionStorage
• Каждый запрос независим и содержит всю необходимую информацию

Версии:

• HTTP/1.1 — стандарт долгие годы, один запрос на соединение
• HTTP/2 — мультиплексирование, сжатие, улучшение производительности
• HTTP/3 — на основе протокола QUIC, самая быстрая версия

HTTP-методы (со стороны Frontend)

// GET — получение данных
fetch("/api/users")
  .then(response => response.json())

// POST — создание ресурса
fetch("/api/users", {
  method: "POST",
  body: JSON.stringify({ name: "John" })
})

// PUT/PATCH — обновление
fetch("/api/users/1", {
  method: "PUT",
  body: JSON.stringify({ name: "Jane" })
})

// DELETE — удаление
fetch("/api/users/1", { method: "DELETE" })

HTTP-статусы ответа

Frontend-разработчик должен распознавать коды:

• 2xx (200-299) — успех (200 OK, 201 Created)
• 3xx (300-399) — редирект (301, 302, 304)
• 4xx (400-499) — ошибка клиента (400 Bad Request, 401 Unauthorized, 404 Not Found)
• 5xx (500-599) — ошибка сервера (500 Internal Server Error)

Структура запроса/ответа

Запрос:

GET /api/users HTTP/1.1
Host: api.example.com
Authorization: Bearer token123
Content-Type: application/json

Ответ:

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 42
Cache-Control: max-age=3600

{"id": 1, "name": "John"}

Кэширование

Frontend использует HTTP-кэш:

• Cache-Control — как долго кэшировать (max-age, no-cache)
• ETag — для проверки актуальности
• Last-Modified — дата последнего изменения

CORS (Cross-Origin Resource Sharing)

// Браузер отправляет preflight-запрос
fetch("https://other-domain.com/api/data", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ data: "test" })
})
// Сервер должен вернуть нужные CORS-заголовки

Практическое применение

Frontend-разработчики работают с HTTP через:

• fetch() API или axios для запросов
• XMLHttpRequest (устаревший подход)
• DevTools Network tab для отладки
• Service Workers для перехвата запросов

Понимание HTTP критически для оптимизации, безопасности (HTTPS, CORS, CSRF), работы с API и отладки проблем сетевого взаимодействия.