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

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

HTTP (HyperText Transfer Protocol) — это основной протокол передачи данных между браузером и сервером. За 10+ лет разработки backend я видел множество неправильных реализаций именно потому, что бэкендеры не понимают, как браузер работает с HTTP.

Основные компоненты HTTP запроса

Когда фронтенд отправляет запрос, он отправляет:

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

{"name": "John"}

Строка запроса: метод + URL + версия протокола

• GET /api/users/123 HTTP/1.1

Заголовки (Headers):

• Host: api.example.com — домен сервера
• Content-Type: application/json — формат тела
• Authorization: Bearer ... — аутентификация
• Accept: application/json — какой формат ответа ожидает клиент

Тело (Body) — данные (обычно JSON)

HTTP методы

Фронтенд чаще всего использует эти методы:

// GET — получить данные (без тела)
fetch('/api/users/123', { method: 'GET' })

// POST — создать новый ресурс
fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'John' })
})

// PUT — полностью заменить ресурс
fetch('/api/users/123', {
  method: 'PUT',
  body: JSON.stringify({ name: 'Jane', age: 30 })
})

// PATCH — частично обновить ресурс
fetch('/api/users/123', {
  method: 'PATCH',
  body: JSON.stringify({ age: 30 })
})

// DELETE — удалить ресурс
fetch('/api/users/123', { method: 'DELETE' })

HTTP ответы

Сервер отвечает кодом состояния и данными:

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 123
Set-Cookie: session=abc123

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

Коды состояния:

// 2xx — успех
200 OK           // Успешный запрос
201 Created      // Ресурс создан
204 No Content   // Успех, но нет данных для возврата

// 3xx — редирект
301 Moved Permanently  // URL изменился навсегда
302 Found              // Временный редирект
304 Not Modified       // Браузер может использовать кэш

// 4xx — ошибка клиента
400 Bad Request        // Неверный формат запроса
401 Unauthorized       // Нет аутентификации
403 Forbidden          // Нет доступа
404 Not Found          // Ресурс не найден
429 Too Many Requests  // Rate limiting

// 5xx — ошибка сервера
500 Internal Server Error
503 Service Unavailable

Заголовки (Headers)

Это метаинформация о запросе/ответе:

Запрос (Request Headers):

// Аутентификация
'Authorization': 'Bearer token' // или 'Basic dXNlcjpwYXNz'

// Формат данных
'Content-Type': 'application/json'
'Accept': 'application/json'

// Кэширование
'If-None-Match': '"abc123"' // ETag из прошлого ответа
'If-Modified-Since': 'Wed, 01 Jan 2020'

// Корневые домены (CORS)
'Origin': 'https://example.com'

// Агент
'User-Agent': 'Mozilla/5.0...'

Ответ (Response Headers):

// Формат
'Content-Type': 'application/json; charset=utf-8'
'Content-Length': '1234'

// Кэширование
'Cache-Control': 'max-age=3600'
'ETag': '"abc123"'
'Last-Modified': 'Wed, 01 Jan 2020'

// CORS
'Access-Control-Allow-Origin': '*'
'Access-Control-Allow-Methods': 'GET, POST, PUT'

// Безопасность
'X-Content-Type-Options': 'nosniff'
'X-Frame-Options': 'DENY'
'X-XSS-Protection': '1; mode=block'

// Cookies
'Set-Cookie': 'sessionId=abc123; Path=/; HttpOnly; Secure'

CORS (Cross-Origin Resource Sharing)

Когда фронтенд на example.com делает запрос к api.example.com, браузер проверяет CORS:

// Фронтенд в браузере
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
})

Браузер:

1. Отправляет preflight запрос OPTIONS
2. Проверяет заголовки Access-Control-Allow-*
3. Если ОК — отправляет реальный POST запрос

Это очень частая причина ошибок: фронтенд не видит ответ из-за CORS.

Правильный CORS на сервере:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

HTTP/1.1 vs HTTP/2 vs HTTP/3

HTTP/1.1 (99% cases):

• Текстовый протокол
• Одно соединение = один запрос
• Keep-Alive для переиспользования соединения

HTTP/2:

• Бинарный формат
• Множество запросов в одном соединении
• Упаковка заголовков (HPACK)
• Server Push (редко используется)

HTTP/3 (QUIC):

• Быстрее (базируется на UDP)
• Восстановление соединения без задержки

Практические примеры для бэкендера

Пример 1: Фронтенд отправляет файл

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('name', 'document');

fetch('/api/upload', {
  method: 'POST',
  body: formData
  // НЕ устанавливаем Content-Type! Браузер сам установит multipart/form-data
})

На сервере:

app.post('/api/upload', (req, res) => {
  // req.file содержит загруженный файл
  // req.body содержит другие поля
});

Пример 2: Аутентификация

// Фронтенд
fetch('/api/auth/login', {
  method: 'POST',
  credentials: 'include', // отправляет cookies
  body: JSON.stringify({ email, password })
})

// Сервер
app.post('/api/auth/login', (req, res) => {
  // проверяем email и password
  res.setHeader('Set-Cookie', 'sessionId=abc123; HttpOnly; Path=/');
  res.json({ success: true });
});

Пример 3: Кэширование

// Фронтенд кэширует по ETag
const res = await fetch('/api/users/123');
const etag = res.headers.get('etag');

// Следующий запрос
const res2 = await fetch('/api/users/123', {
  headers: { 'If-None-Match': etag }
});
// 304 — используем кэш, 200 — данные изменились

Итого

Для бэкендера важно понимать:

• Фронтенд — это просто HTTP клиент
• Браузер накладывает ограничения (CORS, cookies, redirects)
• Заголовки важны для кэширования, аутентификации, безопасности
• Коды ответов должны быть правильные (не 200 за все подряд)
• HTTPS обязателен (cookies с HttpOnly и Secure флагами)