Какой состав запроса?

Состав HTTP запроса

Фундаментальный вопрос о структуре HTTP запроса. Объясню, из каких частей состоит запрос, отправляемый браузером на сервер.

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

HTTP запрос имеет три основные части:

[Request Line] <- стартовая строка
[Headers] <- заголовки
[Body] <- тело (опционально)

1. Request Line (стартовая строка)

Первая строка содержит три элемента:

GET /api/users/123 HTTP/1.1
^   ^               ^
|   |               |
|   |               версия протокола
|   |
|   целевой ресурс (путь + параметры)
|
HTTP метод

HTTP методы:

• GET - получить ресурс (безопасно, без тела)
• POST - создать новый ресурс (с телом)
• PUT - обновить весь ресурс (с телом)
• PATCH - частичное обновление (с телом)
• DELETE - удалить ресурс
• HEAD - как GET, но без тела ответа
• OPTIONS - получить доступные методы

Целевой ресурс:

/api/users/123?sort=name&limit=10#section
 ^            ^                    ^
 |            |                    фрагмент (не отправляется на сервер)
 |            параметры (query string)
 путь (path)

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

После стартовой строки идут заголовки в формате Название: Значение:

Host: api.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
Content-Type: application/json
Content-Length: 256
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Accept: application/json
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cache-Control: max-age=0

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

Host - адрес сервера (обязателен в HTTP/1.1)

User-Agent - информация о клиенте (браузер, ОС)

Content-Type - формат тела запроса:

application/json <- JSON данные
application/x-www-form-urlencoded <- форма
multipart/form-data <- форма с файлами
text/plain <- простой текст
text/html <- HTML

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

Authorization - учетные данные:

Authorization: Bearer <token>
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Accept - какие форматы ответов принимает клиент

Accept-Encoding - какие сжатия поддерживаются (gzip, brotli)

Cookie - сохраненные куки сессии

3. Body (тело запроса)

Опциональная часть, содержит данные для сервера:

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

Присутствует только для методов: POST, PUT, PATCH.

Практический пример

GET запрос (без тела)

GET /api/users?sort=name&limit=10 HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

POST запрос (с телом)

POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Content-Length: 48
Authorization: Bearer token123

{
  "name": "Alice",
  "email": "alice@example.com"
}

Как это выглядит в JavaScript

Fetch API

fetch('https://api.example.com/api/users', {
  method: 'POST',                    // Request Line
  headers: {                         // Headers
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({             // Body
    name: 'Alice',
    email: 'alice@example.com'
  })
})
.then(response => response.json())
.catch(error => console.error('Error:', error));

Axios

import axios from 'axios';

axios.post('https://api.example.com/api/users', 
  {                                  // Body
    name: 'Alice',
    email: 'alice@example.com'
  },
  {                                  // Config (Headers)
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer token123'
    }
  }
);

DevTools: просмотр запросов

1. Открыть DevTools (F12)
2. Вкладка Network
3. Найти запрос в списке
4. Кликнуть на него
5. Вкладка Headers - увидишь всё:
   • Request URL
   • Request Method
   • Status Code
   • Request Headers
   • Request Body
   • Response Headers

Важные детали

Порядок передачи данных

// 1. URL параметры (query string) - видны в URL
GET /api/users?name=alice&age=30

// 2. Headers - видны в DevTools
Authorization: Bearer token123

// 3. Body - скрыто, видно в DevTools
{
  "address": "123 Main St"
}

CORS и Preflight запросы

Для сложных запросов браузер отправляет предварительный запрос:

OPTIONS /api/users HTTP/1.1
Host: api.example.com
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type

Сервер должен разрешить:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST, GET, PUT
Access-Control-Allow-Headers: content-type

Выводы

HTTP запрос состоит из:

1. Request Line - метод, путь, версия HTTP
2. Headers - метаинформация (Content-Type, Authorization, Host, etc.)
3. Body - данные (для POST, PUT, PATCH)

При разработке frontend обязательно контролируй запросы в DevTools, чтобы убедиться, что отправляется корректно: правильный метод, заголовки, данные и авторизация.