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

Есть ли что-нибудь в ответе кроме заголовка и тела?

1.7 Middle🔥 122 комментариев
#JavaScript Core

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

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

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

Есть ли что-нибудь в ответе кроме заголовка и тела?

Да, в HTTP ответе есть ещё несколько важных компонентов. Полный HTTP ответ состоит из четырёх частей, а не просто заголовков (headers) и тела (body).

Структура HTTP ответа

HTTP/1.1 200 OK                    <- Строка состояния (Status Line)
Content-Type: application/json      <- Заголовки (Headers)
Content-Length: 27

{"message": "Hello World"}          <- Тело (Body)

Четыре компонента HTTP ответа

1. Строка состояния (Status Line)

// Формат: HTTP/версия КОД_СОСТОЯНИЯ ОПИСАНИЕ

// Примеры:
// HTTP/1.1 200 OK
// HTTP/1.1 404 Not Found
// HTTP/1.1 500 Internal Server Error
// HTTP/2 200

// В JavaScript:
const response = await fetch('/api/users');
console.log(response.status);      // 200
console.log(response.statusText);  // 'OK'

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

// Метаинформация об ответе (key-value пары)

const response = await fetch('/api/users');

// Получить заголовки
console.log(response.headers.get('Content-Type'));     // 'application/json'
console.log(response.headers.get('Content-Length'));   // '1234'
console.log(response.headers.get('Set-Cookie'));       // 'session=abc123'

// Распространённые заголовки ответа:
/*
Content-Type: application/json         <- тип контента
Content-Length: 1234                   <- размер тела
Cache-Control: max-age=3600            <- кэширование
Set-Cookie: session=abc123             <- установка cookie
Access-Control-Allow-Origin: *         <- CORS
Authorization: Bearer token            <- авторизация
X-Custom-Header: value                 <- кастомный заголовок
ETag: "33a64df..."                    <- версия ресурса
Last-Modified: Mon, 23 May 2022       <- дата модификации
*/

3. Пустая строка (Blank Line)

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 27
                              <- Пустая строка (разделитель)
{"message": "Hello World"}

Пустая строка отделяет заголовки от тела.

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

// Основной контент ответа (может быть пустым)

const response = await fetch('/api/users');
const body = await response.json();  // Парсим тело

// Тело может быть:
// - JSON: {"name": "John", "age": 30}
// - HTML: <html><body>...</body></html>
// - Text: Hello World
// - Binary: (файлы, изображения)
// - Пусто (для DELETE, 204 No Content)

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

HTTP/1.1 200 OK
Date: Wed, 02 Apr 2024 10:15:30 GMT
Server: nginx/1.21.0
Content-Type: application/json; charset=utf-8
Content-Length: 145
Cache-Control: max-age=3600, public
Set-Cookie: sessionid=abc123def456; Path=/; HttpOnly; SameSite=Strict
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
ETag: "W/e4d909bfd932...."
Vary: Accept-Encoding
X-Response-Time: 125ms

{
  "id": 1,
  "username": "john_doe",
  "email": "john@example.com",
  "created_at": "2024-01-15T10:30:00Z"
}

Коды состояния (Status Codes)

// Доступны в response.status

// 1xx — Информационные
// 100 Continue — продолжить отправку тела
// 101 Switching Protocols — переход на другой протокол

// 2xx — Успех
// 200 OK — запрос выполнен успешно
// 201 Created — ресурс создан
// 204 No Content — успех, но без тела
// 206 Partial Content — частичный контент

// 3xx — Перенаправление
// 301 Moved Permanently — постоянный редирект
// 302 Found — временный редирект
// 304 Not Modified — кэшированный контент актуален
// 307 Temporary Redirect — временный редирект (метод сохраняется)

// 4xx — Ошибка клиента
// 400 Bad Request — ошибка в запросе
// 401 Unauthorized — требуется авторизация
// 403 Forbidden — доступ запрещён
// 404 Not Found — ресурс не найден
// 409 Conflict — конфликт (например, дублирующийся ID)
// 422 Unprocessable Entity — ошибка валидации
// 429 Too Many Requests — rate limit

// 5xx — Ошибка сервера
// 500 Internal Server Error — внутренняя ошибка
// 502 Bad Gateway — ошибка gateway
// 503 Service Unavailable — сервис недоступен
// 504 Gateway Timeout — timeout

Работа с ответом в JavaScript

// Полный пример получения всех компонентов ответа
async function fullResponseExample() {
  const response = await fetch('/api/users/1');
  
  // 1. Статус и статус текст
  console.log('Status:', response.status);        // 200
  console.log('Status Text:', response.statusText); // 'OK'
  
  // 2. Заголовки
  console.log('Headers:');
  response.headers.forEach((value, key) => {
    console.log(`  ${key}: ${value}`);
  });
  
  // 3. Тело (парсим в зависимости от типа)
  const contentType = response.headers.get('Content-Type');
  let body;
  
  if (contentType?.includes('application/json')) {
    body = await response.json();
  } else if (contentType?.includes('text/html')) {
    body = await response.text();
  } else if (contentType?.includes('application/octet-stream')) {
    body = await response.blob();
  }
  
  console.log('Body:', body);
  
  // Полная информация
  return {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers,
    body: body,
    ok: response.ok,  // true для 200-299
    url: response.url,
    redirected: response.redirected
  };
}

Кастомные заголовки

// Frontend может отправлять и получать кастомные заголовки

// Отправка:
const response = await fetch('/api/data', {
  headers: {
    'X-Custom-Header': 'my-value',
    'X-Request-ID': 'abc-123',
    'Authorization': 'Bearer token123'
  }
});

// Получение кастомных заголовков:
const customValue = response.headers.get('X-Custom-Response');
const requestId = response.headers.get('X-Request-ID');

CORS и заголовки

// Важно для cross-origin запросов

// Сервер отправляет:
Access-Control-Allow-Origin: https://frontend.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400  // Кэш preflight запроса

// Frontend может получить информацию, но не напрямую
const response = await fetch('https://api.example.com/data');

// Заголовки CORS по умолчанию доступны
console.log(response.headers.get('Content-Type'));

// Но не все заголовки доступны (security)
// Можно получить только whitelisted заголовки

Response объект в браузере

// Response объект имеет много свойств и методов

const response = await fetch('/api/data');

// Свойства
console.log(response.status);       // 200
console.log(response.statusText);   // 'OK'
console.log(response.headers);      // Headers object
console.log(response.body);         // ReadableStream
console.log(response.url);          // final URL (с редиректами)
console.log(response.type);         // 'basic', 'cors', 'error'
console.log(response.ok);           // true если 200-299
console.log(response.redirected);   // true если был редирект

// Методы для получения body
await response.json();              // Парсить как JSON
await response.text();              // Получить как текст
await response.blob();              // Получить как blob
await response.arrayBuffer();       // Получить как ArrayBuffer
await response.clone();             // Клонировать ответ

Практический пример: обработка различных типов ответов

async function handleResponse(url) {
  const response = await fetch(url);
  
  // Проверить статус
  if (!response.ok) {
    // Если ошибка
    const error = await response.json();
    throw new Error(`${response.status}: ${error.message}`);
  }
  
  // Определить тип контента
  const contentType = response.headers.get('Content-Type');
  
  if (contentType?.includes('application/json')) {
    return await response.json();
  } else if (contentType?.includes('image/')) {
    return await response.blob();
  } else if (contentType?.includes('text/')) {
    return await response.text();
  } else if (contentType?.includes('application/pdf')) {
    return await response.arrayBuffer();
  }
}

Итог

HTTP ответ состоит из:

  1. Строка состояния (Status Line) — HTTP/1.1 200 OK
  2. Заголовки (Headers) — метаинформация (Content-Type, Content-Length, etc.)
  3. Пустая строка — разделитель
  4. Тело (Body) — основной контент (JSON, HTML, файлы, etc.)

Дополнительно доступны:

  • Коды состояния (status codes: 200, 404, 500, etc.)
  • Методы Response (json(), text(), blob(), arrayBuffer())
  • Свойства (headers, url, ok, redirected, type)

Для frontend-разработчика важно:

  • Понимать структуру ответа
  • Проверять response.ok или response.status
  • Парсить body в зависимости от Content-Type
  • Работать с заголовками (особенно CORS)
  • Обрабатывать ошибки корректно