В каком виде передается служебная информация в HTTP заголовке

Служебная информация в HTTP заголовках

Сужебная информация в HTTP заголовках передается в виде текстовых пар "ключ: значение" (key-value pairs). Каждый заголовок состоит из имени (ключа) и значения, разделенных двоеточием и пробелом.

Базовый формат

Имя-Заголовка: значение

Примеры:

Content-Type: application/json
Authorization: Bearer token123
Content-Length: 1024
Cache-Control: max-age=3600

Структура HTTP запроса с заголовками

GET /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer abc123
Accept: application/json
Accept-Language: ru-RU,ru;q=0.9

{"body": "данные"}

Структура:

1. Request Line — метод, URL, версия HTTP
2. Headers — служебная информация (ключ: значение)
3. Пустая строка — разделитель
4. Body — данные запроса (опционально)

Стандартные HTTP заголовки

Заголовки запроса (Request Headers)

Authorization: Bearer eyJhbGciOiJIUzI1NiJ...
Content-Type: application/json
Content-Length: 256
Accept: application/json
Accept-Language: ru-RU,ru;q=0.9,en;q=0.8
Accept-Encoding: gzip, deflate, br
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Host: api.example.com
Referer: https://example.com/page
Cookie: session_id=abc123; user_id=456
Cache-Control: no-cache
Connection: keep-alive

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

Content-Type: application/json; charset=utf-8
Content-Length: 512
Content-Encoding: gzip
Cache-Control: max-age=3600, public
Set-Cookie: session_id=xyz789; Path=/; HttpOnly
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT
Location: https://api.example.com/resource/123
Server: nginx/1.24.0
Vary: Accept-Encoding

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

Пример 1: Отправка заголовков с fetch

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiJ...",
    "X-Request-ID": "req-12345"
  },
  body: JSON.stringify({ name: "Иван", email: "ivan@mail.com" })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Пример 2: Чтение заголовков ответа

fetch("https://api.example.com/data")
  .then(response => {
    // Прочитать заголовки ответа
    console.log(response.headers.get("Content-Type")); // "application/json"
    console.log(response.headers.get("Cache-Control")); // "max-age=3600"
    console.log(response.status); // 200
    
    return response.json();
  })
  .then(data => console.log(data));

Пример 3: Итерирование по всем заголовкам

fetch("https://api.example.com/data")
  .then(response => {
    // Прочитать все заголовки
    response.headers.forEach((value, key) => {
      console.log(`${key}: ${value}`);
    });
    
    return response.json();
  });

Типы значений в заголовках

1. Текстовые значения

Content-Type: application/json
Server: nginx/1.24.0

2. Директивы (разделенные запятыми)

Accept: text/html, application/json, */*
Cache-Control: max-age=3600, public, must-revalidate

3. Параметры с качеством (quality factors)

Accept-Language: ru-RU,ru;q=0.9,en;q=0.8
              ^ось  ^
              полн  качество: 90%, en: 80%

4. Авторизационные токены

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
X-API-Key: sk_live_abc123xyz789

5. Cookies

Cookie: session_id=abc123; user_id=456; preferences=dark-mode

CORS заголовки

// Запрос с CORS
fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    // CORS предпечные заголовки
    "Origin": "https://myapp.com"
  },
  body: JSON.stringify({ data: "test" })
});

// Ответ сервера должен включить:
// Access-Control-Allow-Origin: https://myapp.com
// Access-Control-Allow-Methods: GET, POST, OPTIONS
// Access-Control-Allow-Headers: Content-Type, Authorization

Пользовательские заголовки (Custom Headers)

Вы можете создавать собственные заголовки, начинающиеся с X-:

fetch("https://api.example.com/data", {
  headers: {
    "X-Request-ID": "req-12345",
    "X-Custom-Header": "my-value",
    "X-Agent-Api-Key": "secret-key-123"
  }
});

Кодирование в заголовках

1. Base64 для Basic Auth

const credentials = "username:password";
const encoded = btoa(credentials); // Base64 кодирование
const headers = {
  "Authorization": `Basic ${encoded}`
};

2. UTF-8 для текстовых значений

const headers = {
  "Content-Type": "application/json; charset=utf-8"
};

Размер и ограничения заголовков

// Обычно максимальный размер заголовков:
// - Весь заголовок: 8KB - 16KB
// - Одна строка: 4KB - 8KB
// - Зависит от сервера и браузера

fetch("https://api.example.com/data", {
  headers: {
    "X-Very-Long-Header": "a".repeat(8000) // может быть ошибка
  }
});

Важные моменты

1. Регистр не чувствительный — Content-Type и content-type — одно и то же
2. Пробелы важны — после двоеточия должен быть пробел: Content-Type: application/json
3. Специальные символы — некоторые символы требуют URL-кодирования
4. Порядок — не имеет значения, но есть конвенции
5. HTTP/2 — заголовки сжимаются с помощью HPACK

Практический пример: API запрос

function makeApiRequest(url, method = "GET", data = null) {
  const options = {
    method,
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${getAuthToken()}`,
      "X-Request-ID": generateRequestId(),
      "Accept": "application/json"
    }
  };
  
  if (data) {
    options.body = JSON.stringify(data);
  }
  
  return fetch(url, options)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response.json();
    });
}

makeApiRequest("https://api.example.com/users", "POST", {
  name: "Иван",
  email: "ivan@mail.com"
});

Ключевые выводы

1. HTTP заголовки — это текстовые пары "ключ: значение"
2. Они передаются в текстовом формате в начале HTTP сообщения
3. Содержат служебную информацию: тип контента, авторизацию, кэширование, CORS и т.д.
4. Браузер и сервер обмениваются заголовками автоматически
5. Вы можете читать и устанавливать собственные заголовки через fetch API