PrepBro
← Назад к вопросам

Для чего используются HTTP заголовки?

2.3 Middle🔥 121 комментариев
#JavaScript Core

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Для чего используются HTTP заголовки

HTTP заголовки — это метаданные, которые передаются в каждом HTTP запросе и ответе. Они содержат дополнительную информацию о запросе/ответе, помогают браузеру и серверу корректно обрабатывать данные и управляют поведением приложения.

Общая структура

HTTP заголовки находятся между стартовой линией и телом запроса/ответа:

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

[Тело запроса]

Категории заголовков

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

Передаются от клиента (браузер) к серверу:

Host — адрес сервера

Host: api.example.com:8080

Content-Type — формат данных в теле запроса

Content-Type: application/json
Content-Type: application/x-www-form-urlencoded
Content-Type: multipart/form-data

Authorization — аутентификационные данные

Authorization: Bearer eyJhbGciOiJIUzI1NiI...
Authorization: Basic dXNlcjpwYXNzd29yZA==

Cookie — сохранённые данные клиента

Cookie: sessionId=abc123; userId=456

User-Agent — информация о браузере

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36

Accept — какие типы данных ожидает клиент

Accept: application/json, text/plain
Accept-Language: en-US,en;q=0.9,ru;q=0.8
Accept-Encoding: gzip, deflate, br

Referer — откуда пришёл запрос (из какой страницы)

Referer: https://example.com/page1

Origin — origin источника запроса (для CORS)

Origin: https://example.com

Custom Headers — пользовательские заголовки

X-API-Key: my-secret-key
X-Request-ID: 12345-67890
X-Custom-Header: value

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

Передаются от сервера к клиенту:

Content-Type — тип данных в ответе

Content-Type: application/json; charset=utf-8

Content-Length — размер тела ответа в байтах

Content-Length: 1024

Set-Cookie — установить cookie на клиент

Set-Cookie: sessionId=xyz789; path=/; max-age=3600; secure; httpOnly

Cache-Control — правила кеширования

Cache-Control: public, max-age=3600
Cache-Control: private, no-cache, no-store, must-revalidate

ETag — версия ресурса для кеша

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Last-Modified — дата последнего изменения

Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT

Access-Control-Allow-Origin — CORS разрешение

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

Location — redirect на новый URL

Location: https://example.com/new-page

Server — информация о сервере

Server: nginx/1.21.0

X-Frame-Options — безопасность от кликджекинга

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

X-Content-Type-Options — защита от MIME sniffing

X-Content-Type-Options: nosniff

Content-Security-Policy — политика безопасности контента

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'

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

Чтение заголовков ответа

fetch('https://api.example.com/users')
  .then(response => {
    // Получить заголовок
    const contentType = response.headers.get('Content-Type');
    const etag = response.headers.get('ETag');
    const cacheControl = response.headers.get('Cache-Control');
    
    console.log('Content-Type:', contentType);
    console.log('ETag:', etag);
    console.log('Cache-Control:', cacheControl);
    
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

Отправка custom заголовков

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123',
    'X-Request-ID': 'unique-request-id',
    'X-API-Key': 'my-secret-key'
  },
  body: JSON.stringify({
    name: 'Alice',
    email: 'alice@example.com'
  })
})
.then(response => response.json())
.then(data => console.log(data));

Работа с CORS заголовками

// Запрос с credentials (cookies)
fetch('https://api.example.com/users', {
  method: 'GET',
  credentials: 'include', // Отправить cookies
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json());

// Браузер автоматически отправит:
// Origin: https://example.com
// Cookie: sessionId=abc123

Жизненный цикл HTTP запроса

1. БРАУЗЕР ОТПРАВЛЯЕТ ЗАПРОС
   GET /api/users HTTP/1.1
   Host: api.example.com
   Authorization: Bearer token
   Content-Type: application/json
   
   [Body]

2. СЕРВЕР ПОЛУЧАЕТ
   - Парсит заголовки
   - Проверяет Authorization
   - Проверяет Content-Type
   - Обрабатывает запрос

3. СЕРВЕР ОТПРАВЛЯЕТ ОТВЕТ
   HTTP/1.1 200 OK
   Content-Type: application/json
   Cache-Control: public, max-age=3600
   Set-Cookie: sessionId=new; path=/
   
   { "users": [...] }

4. БРАУЗЕР ПОЛУЧАЕТ
   - Парсит заголовки
   - Сохраняет cookies
   - Кеширует ответ
   - Обрабатывает тело

Типичные кейсы использования

1. Аутентификация

// Клиент отправляет токен
headers: {
  'Authorization': 'Bearer eyJhbGciOiJIUzI1NiI...'
}

// Сервер отправляет новый токен
Set-Cookie: authToken=xyz; httpOnly; secure; sameSite=strict

2. Кеширование

// Сервер указывает как кешировать
Cache-Control: public, max-age=31536000
ETag: "123abc"

// Браузер может запросить условно
If-None-Match: "123abc"
// Сервер ответит 304 Not Modified (не пересылает данные)

3. Обработка файлов

// Скачивание файла
Content-Type: application/pdf
Content-Disposition: attachment; filename="document.pdf"
Content-Length: 102400

4. API версионирование

headers: {
  'Accept': 'application/vnd.api+json;version=2'
}

// Или
headers: {
  'X-API-Version': '2'
}

5. CORS

// Браузер отправляет
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

// Сервер разрешает
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Безопасность с заголовками

// Защита от кликджекинга
X-Frame-Options: SAMEORIGIN

// Защита от MIME sniffing
X-Content-Type-Options: nosniff

// Политика безопасности
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

// Предотвратить кеш чувствительных данных
Cache-Control: no-store, no-cache, must-revalidate

// HSTS для HTTPS
Strict-Transport-Security: max-age=31536000; includeSubDomains

DevTools для отладки

В браузере DevTools -> Network tab можно видеть все заголовки:

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

Response Headers:
- HTTP/1.1 200 OK
- Content-Type: application/json
- Cache-Control: public, max-age=3600
- ETag: "abc123"

Важные выводы

  1. Request Headers — отправляет браузер (авторизация, тип данных, cookies)
  2. Response Headers — отправляет сервер (кеш, cookies, CORS, безопасность)
  3. Content-Type — указывает формат данных (JSON, HTML, XML)
  4. Authorization — передаёт аутентификационные данные
  5. Cache-Control — управляет кешированием
  6. Set-Cookie — сохраняет данные на клиенте
  7. CORS Headers — разрешают cross-origin запросы
  8. Security Headers — защищают от атак

Понимание HTTP заголовков критично для работы с API, аутентификацией, кешированием и безопасностью веб-приложений.

Для чего используются HTTP заголовки? | PrepBro