Из чего состоит HTTP

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

HTTP (HyperText Transfer Protocol) - это протокол прикладного уровня для обмена информацией в интернете. Каждый HTTP обмен состоит из запроса (request) от клиента и ответа (response) от сервера.

Компоненты HTTP запроса

1. Строка запроса (Request Line)

Определяет тип операции, ресурс и версию протокола:

GET /api/users/123 HTTP/1.1

Структура: METHOD URL HTTP/VERSION

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

Метаинформация о запросе:

Host: example.com
User-Agent: Mozilla/5.0
Content-Type: application/json
Accept: application/json
Authorization: Bearer token123
Cache-Control: no-cache

Заголовки - это пары "ключ: значение".

3. Пустая строка

Отделяет заголовки от тела.

4. Тело запроса (Body)

Данные, отправляемые серверу (только для POST, PUT, PATCH):

{
  "name": "John",
  "email": "john@example.com"
}

Методы HTTP

GET - получить данные

fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => console.log(data));

POST - создать новый ресурс

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' })
});

PUT - заменить ресурс полностью

fetch('https://api.example.com/users/1', {
  method: 'PUT',
  body: JSON.stringify(fullUserData)
});

PATCH - частичное обновление

fetch('https://api.example.com/users/1', {
  method: 'PATCH',
  body: JSON.stringify({ name: 'Bob' })
});

DELETE - удалить ресурс

fetch('https://api.example.com/users/1', {
  method: 'DELETE'
});

HEAD - как GET, но без тела ответа

OPTIONS - получить доступные методы для ресурса

Компоненты HTTP ответа

1. Строка статуса (Status Line)

Версия протокола, код состояния и описание:

HTTP/1.1 200 OK

Структура: HTTP/VERSION CODE REASON

2. Заголовки ответа (Response Headers)

Content-Type: application/json
Content-Length: 1234
Set-Cookie: session=abc123
Cache-Control: max-age=3600
Access-Control-Allow-Origin: *

3. Пустая строка

Отделяет заголовки от тела.

4. Тело ответа (Response Body)

Актуальные данные:

{
  "id": 123,
  "name": "John",
  "email": "john@example.com"
}

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

1xx (Informational) - информационные

• 100 Continue - продолжить отправку

2xx (Success) - успешные

• 200 OK - всё хорошо
• 201 Created - ресурс создан
• 204 No Content - успех без тела ответа

3xx (Redirection) - перенаправление

• 301 Moved Permanently - постоянный редирект
• 302 Found - временный редирект
• 304 Not Modified - кэш актуален

4xx (Client Error) - ошибки клиента

• 400 Bad Request - неправильный запрос
• 401 Unauthorized - нужна авторизация
• 403 Forbidden - доступ запрещён
• 404 Not Found - ресурс не найден
• 429 Too Many Requests - слишком много запросов

5xx (Server Error) - ошибки сервера

• 500 Internal Server Error - внутренняя ошибка
• 502 Bad Gateway - проблемы с шлюзом
• 503 Service Unavailable - сервис недоступен

Важные заголовки

Для запроса:

• Content-Type - формат тела (application/json, text/html)
• Authorization - аутентификация (Bearer token, Basic)
• Accept - какие форматы принимает клиент
• User-Agent - информация о клиенте
• Referer - откуда пришёл запрос
• Cookie - данные сессии

Для ответа:

• Content-Type - формат тела ответа
• Set-Cookie - установить cookie
• Cache-Control - кэширование
• Access-Control-Allow-Origin - CORS
• Content-Length - размер тела

Полный пример запроса и ответа

Запрос:

POST /api/posts HTTP/1.1
Host: blog.example.com
Content-Type: application/json
Content-Length: 27
Authorization: Bearer abc123

{"title": "Hello", "text": "World"}

Ответ:

HTTP/1.1 201 Created
Content-Type: application/json
Content-Length: 68
Set-Cookie: session=xyz789

{"id": 1, "title": "Hello", "text": "World", "author_id": 5}

HTTP/2 и HTTP/3

Новые версии улучшают производительность:

• HTTP/2 - мультиплексирование, сжатие заголовков
• HTTP/3 - использует QUIC вместо TCP

Но структура запроса и ответа остаётся той же.

Frontend разработчику

Основные инструменты для работы с HTTP:

// Fetch API (современный стандарт)
fetch('https://api.example.com/data')
  .then(res => {
    console.log(res.status);
    console.log(res.headers);
    return res.json();
  })
  .then(data => console.log(data));

// Axios (популярная библиотека)
import axios from 'axios';

axios.post('https://api.example.com/users', {
  name: 'John'
}).then(res => console.log(res.data));

Понимание структуры HTTP критично для работы с API, обработки ошибок и оптимизации сетевых запросов.