Что передается в Headers запроса HTTP?

Что передается в Headers запроса HTTP

HTTP Headers (заголовки) - это метаинформация, которая передается вместе с HTTP запросом. Они помогают браузеру и серверу общаться и обмениваться важной информацией о запросе и ответе.

Структура HTTP запроса с Headers

GET /api/users HTTP/1.1
Host: api.example.com
Authorization: Bearer token123
Content-Type: application/json
User-Agent: Mozilla/5.0
Accept: application/json

{"name": "John"}

Основные Headers запроса

1. Host

Домен, к которому идет запрос. Обязателен для HTTP/1.1:

fetch('/api/users')
// Автоматически добавляется:
// Host: example.com

2. Content-Type

Тип данных в теле запроса:

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

// Form Data
fetch('/api/upload', {
  method: 'POST',
  headers: { 'Content-Type': 'multipart/form-data' },
  body: formData
})

// XML
fetch('/api/data', {
  headers: { 'Content-Type': 'application/xml' }
})

// Plain Text
fetch('/api/text', {
  headers: { 'Content-Type': 'text/plain' }
})

3. Authorization

Учетные данные для аутентификации:

// Bearer Token (JWT)
fetch('/api/profile', {
  headers: { 'Authorization': 'Bearer eyJhbGc...' }
})

// Basic Auth (username:password в base64)
fetch('/api/users', {
  headers: { 'Authorization': 'Basic ' + btoa('user:pass') }
})

// API Key
fetch('/api/data', {
  headers: { 'Authorization': 'Bearer sk-1234567890' }
})

4. User-Agent

Информация о браузере и ОС (обычно устанавливается автоматически):

// Автоматически:
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
           (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

// Можно переопределить
fetch('/api/data', {
  headers: { 'User-Agent': 'MyApp/1.0' }
})

5. Accept

Какие типы ответа приемлет клиент:

fetch('/api/data', {
  headers: {
    'Accept': 'application/json',
    // или несколько типов
    'Accept': 'application/json, text/plain, */*'
  }
})

6. Accept-Language

Предпочитаемый язык (обычно из браузера):

// Автоматически из браузера
Accept-Language: en-US,en;q=0.9,ru;q=0.8

// Переопределить
fetch('/api/data', {
  headers: { 'Accept-Language': 'ru-RU,ru;q=0.9' }
})

7. Content-Length

Длина тела запроса (обычно устанавливается автоматически):

// Автоматически
Content-Length: 1024

8. Cache-Control

Указывает браузеру как кэшировать ответ:

fetch('/api/user', {
  headers: { 'Cache-Control': 'no-cache' }
})

9. Referer (note: typo in HTTP standard)

Источник запроса (с какой страницы пришли):

// Автоматически
Referer: https://example.com/products

// Контролируется атрибутом rel
<a href="/page" rel="noreferrer">Link</a> // Не отправляет Referer

Примеры реальных Headers

Запрос с аутентификацией

fetch('/api/profile', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
})

// Отправляется:
// GET /api/profile HTTP/1.1
// Host: api.example.com
// Authorization: Bearer token123
// Content-Type: application/json
// Accept: application/json
// User-Agent: Mozilla/5.0...

POST запрос с JSON

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
})

// Отправляется:
// POST /api/users HTTP/1.1
// Host: api.example.com
// Content-Type: application/json
// Content-Length: 45
// User-Agent: Mozilla/5.0...
// Connection: keep-alive
// {"name":"John","email":"john@example.com"}

Загрузка файла

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

fetch('/api/upload', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer token123'
    // Content-Type: multipart/form-data автоматически
  },
  body: formData
})

Headers ответа сервера

Сервер также отправляет Headers в ответе:

fetch('/api/data')
  .then(response => {
    console.log(response.headers.get('Content-Type'))
    // application/json
    console.log(response.headers.get('Set-Cookie'))
    // session=abc123
    console.log(response.headers.get('Cache-Control'))
    // max-age=3600
    return response.json()
  })

Частые Headers ответа:

Content-Type: application/json
Set-Cookie: session=abc123; Path=/; HttpOnly
Cache-Control: max-age=3600
ETag: "abc123"
X-Total-Count: 1000
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

Custom Headers

Можно создавать свои Headers для API:

fetch('/api/data', {
  headers: {
    'X-API-Key': 'my-secret-key',
    'X-Request-ID': generateUUID(),
    'X-Custom-Header': 'custom-value'
  }
})

// На сервере можно проверить
if (!req.headers['x-api-key']) {
  return 401
}

CORS Headers

Для кросс-доменных запросов используются CORS Headers:

// Браузер автоматически добавляет
fetch('https://api.other-domain.com/data')
// Отправляется:
// Origin: https://example.com

// Сервер должен вернуть
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization

Инспекция Headers в браузере

В DevTools (F12) -> Network tab:

1. Откроешь Network
2. Выполнишь запрос
3. Кликнешь на запрос
4. Увидишь Headers
   - Request Headers: заголовки запроса
   - Response Headers: заголовки ответа

Вывод

Headers - это важная часть HTTP протокола. Они передают:

• Аутентификацию - Authorization: Bearer token
• Метаинформацию - Content-Type, Accept
• Управление кэшем - Cache-Control
• Безопасность - CORS, X-API-Key
• Информацию о браузере - User-Agent

Понимание Headers необходимо для работы с API и решения проблем с запросами.