Пошук уроків, статей та іншого контенту
Розглянете структуру HTTP-запиту й відповіді: заголовки, тіло, статус-коди та типові групи помилок.
HTTP — це протокол, за допомогою якого браузер і вебсервер обмінюються даними.
Коли ви відкриваєте вебсторінку, браузер надсилає HTTP-запит:
Браузер формує запит до сервера.
Сервер отримує запит і обробляє його.
Сервер повертає HTTP-відповідь.
Браузер використовує відповідь для відображення сторінки або виконання іншої дії.
HTTP-запит і HTTP-відповідь складаються з таких основних частин:
стартовий рядок;
заголовки;
порожній рядок між заголовками й тілом;
тіло повідомлення — за потреби.
Спрощено HTTP-запит має такий вигляд:
GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Browser
Перший рядок містить:
HTTP-метод;
шлях до ресурсу;
версію HTTP.
У прикладі:
GET /index.html HTTP/1.1GET — метод запиту. Він означає, що клієнт хоче отримати ресурс.
Найпоширеніші HTTP-методи:
GET — отримати дані;
POST — надіслати нові дані;
PUT — повністю замінити ресурс;
PATCH — частково змінити ресурс;
DELETE — видалити ресурс;
HEAD — отримати лише заголовки відповіді, без тіла.
Заголовки містять додаткову інформацію про запит.
Приклади:
Host: example.com
Accept: application/json
Content-Type: application/json
Authorization: Bearer tokenЗаголовки мають формат:
Назва: значенняПоширені заголовки запиту:
Host — домен, до якого звертається клієнт;
Accept — формати даних, які клієнт готовий отримати;
Content-Type — формат даних у тілі запиту;
Authorization — дані для авторизації;
User-Agent — інформація про клієнт;
Cookie — cookies, які браузер надсилає серверу.
Тіло запиту містить дані, які клієнт передає серверу. Воно найчастіше використовується в запитах POST, PUT і PATCH.
Наприклад, тіло запиту у форматі JSON:
{
"name": "Марія",
"email": "maria@example.com"
}Для JSON-запиту потрібно вказати відповідний заголовок:
Content-Type: application/jsonСпрощено HTTP-відповідь має такий вигляд:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<h1>Головна сторінка</h1>Перший рядок відповіді містить:
версію HTTP;
статус-код;
текстовий опис статусу.
HTTP/1.1 200 OKУ цьому прикладі:
HTTP/1.1 — версія протоколу;
200 — статус-код;
OK — короткий опис результату.
Заголовки відповіді описують результат виконання запиту та дані, які повертає сервер.
Приклади:
Content-Type: application/json
Content-Length: 87
Cache-Control: no-cache
Set-Cookie: sessionId=abc123
Location: /profileПоширені заголовки відповіді:
Content-Type — формат тіла відповіді;
Content-Length — розмір тіла відповіді;
Cache-Control — правила кешування;
Set-Cookie — команда зберегти cookie;
Location — адреса для перенаправлення;
Access-Control-Allow-Origin — правила доступу з інших джерел.
Тіло відповіді містить дані, які сервер повертає клієнту.
Це можуть бути:
HTML;
JSON;
CSS;
JavaScript;
зображення;
текст;
файл іншого типу.
Наприклад, JSON-відповідь:
{
"id": 42,
"name": "Марія",
"active": true
}Заголовок Content-Type повідомляє клієнту, як інтерпретувати тіло:
Content-Type: application/jsonУ браузері для HTTP-запитів зазвичай використовують функцію fetch.
fetch(window.location.href)
.then((response) => {
console.log("Статус:", response.status);
console.log("Успішна відповідь:", response.ok);
console.log("Тип даних:", response.headers.get("content-type"));
return response.text();
})
.then((body) => {
console.log("Тіло відповіді:");
console.log(body);
})
.catch((error) => {
console.error("Помилка мережі:", error);
});Цей приклад можна виконати в консолі браузера на будь-якій відкритій сторінці.
ResponseФункція fetch повертає проміс, який після завершення запиту містить об'єкт Response.
Корисні властивості та методи:
response.status — числовий статус-код;
response.statusText — текстовий опис статусу;
response.ok — true, якщо статус перебуває в діапазоні від 200 до 299;
response.headers — заголовки відповіді;
response.url — фактична URL відповіді;
response.text() — прочитати тіло як текст;
response.json() — прочитати тіло та перетворити його на JavaScript-об'єкт;
response.blob() — прочитати тіло як бінарні дані.
Тіло відповіді можна прочитати лише один раз. Наприклад, після response.json() не можна повторно викликати response.text() для тієї самої відповіді.
fetchЗаголовки можна передати в параметрах запиту:
const userData = {
name: "Олена",
email: "olena@example.com"
};
fetch("/api/users", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify(userData)
})
.then(async (response) => {
const data = await response.json();
if (!response.ok) {
throw new Error(`HTTP-помилка: ${response.status}`);
}
return data;
})
.then((data) => {
console.log("Користувача створено:", data);
})
.catch((error) => {
console.error("Не вдалося створити користувача:", error);
});У цьому прикладі:
method визначає HTTP-метод;
headers містить заголовки;
JSON.stringify перетворює JavaScript-об'єкт на JSON-рядок;
body містить дані запиту;
response.ok перевіряє, чи є статус успішним.
Адреса /api/users є відносною. Вона означає, що запит буде надіслано на той самий домен, з якого завантажено сторінку. Такий endpoint має існувати на сервері застосунку.
Якщо сервер повертає JSON, використовуйте response.json():
fetch("/api/products")
.then((response) => {
if (!response.ok) {
throw new Error(`Сервер повернув статус ${response.status}`);
}
return response.json();
})
.then((products) => {
console.log("Товари:", products);
})
.catch((error) => {
console.error("Помилка:", error.message);
});Важливо: fetch не вважає статуси 404 або 500 помилкою JavaScript автоматично. Проміс зазвичай успішно виконується, але response.ok буде false.
Тому статус потрібно перевіряти самостійно:
if (!response.ok) {
throw new Error(`HTTP-помилка: ${response.status}`);
}Статус-коди HTTP складаються з трьох цифр. Перша цифра визначає загальну групу результату.
1xx — інформаційніТакі відповіді повідомляють про проміжний стан обробки запиту.
Приклади:
100 Continue — сервер очікує продовження запиту;
101 Switching Protocols — сервер погодився змінити протокол.
У повсякденній роботі з fetch ці статуси зазвичай обробляє браузер, і розробник рідко працює з ними безпосередньо.
2xx — успішне виконанняЗапит було успішно оброблено.
Поширені статуси:
200 OK — стандартна успішна відповідь;
201 Created — ресурс створено;
202 Accepted — запит прийнято для подальшої обробки;
204 No Content — успіх без тіла відповіді.
Наприклад, POST для створення ресурсу часто повертає 201 Created, а DELETE може повертати 204 No Content.
3xx — перенаправленняКлієнту потрібно виконати додаткову дію або скористатися іншою адресою.
Поширені статуси:
301 Moved Permanently — ресурс переміщено назавжди;
302 Found — тимчасове перенаправлення;
304 Not Modified — ресурс не змінився, можна використати кешовану версію.
Браузер часто обробляє перенаправлення автоматично.
4xx — помилка клієнтаЗапит містить проблему з боку клієнта: неправильну адресу, дані або відсутні права доступу.
Поширені статуси:
400 Bad Request — сервер не може обробити запит через неправильний формат;
401 Unauthorized — потрібна автентифікація;
403 Forbidden — доступ заборонено;
404 Not Found — ресурс не знайдено;
405 Method Not Allowed — HTTP-метод не дозволений для цього ресурсу;
409 Conflict — конфлікт із поточним станом ресурсу;
422 Unprocessable Content — дані мають правильний формат, але не проходять перевірку;
429 Too Many Requests — клієнт надсилає забагато запитів.
5xx — помилка сервераСервер не зміг коректно обробити правильний або прийнятний запит.
Поширені статуси:
500 Internal Server Error — внутрішня помилка сервера;
501 Not Implemented — сервер не підтримує потрібну можливість;
502 Bad Gateway — проміжний сервер отримав неправильну відповідь;
503 Service Unavailable — сервіс тимчасово недоступний;
504 Gateway Timeout — проміжний сервер не дочекався відповіді.
Статуси 5xx зазвичай потребують виправлення на сервері або повторної спроби пізніше.
Це важливе розрізнення під час роботи з fetch.
Сервер відповів, але повернув статус помилки:
404 Not Found
500 Internal Server ErrorУ такому випадку проміс fetch зазвичай не відхиляється автоматично. Потрібно перевірити response.ok або response.status.
Браузер не зміг отримати доступну HTTP-відповідь. Причини можуть бути такими:
відсутнє мережеве з'єднання;
домен не відповідає;
запит заблоковано політикою браузера;
виникла проблема з TLS-сертифікатом;
запит було перервано.
У такому випадку спрацьовує catch.
async function loadData() {
try {
const response = await fetch("/api/data");
if (!response.ok) {
throw new Error(`HTTP-помилка: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Не вдалося виконати запит:", error.message);
}
}
loadData();Браузер дає змогу переглядати HTTP-запити в інструментах розробника.
Відкрийте DevTools.
Перейдіть на вкладку Network.
Перезавантажте сторінку.
Виберіть потрібний запит.
Перегляньте розділи:
Headers — заголовки запиту та відповіді;
Payload — дані, надіслані в тілі запиту;
Preview — зручний перегляд відповіді;
Response — необроблене тіло відповіді;
Timing — інформація про тривалість етапів запиту.
У списку мережевих запитів також видно:
HTTP-метод;
адресу ресурсу;
статус-код;
тип ресурсу;
час виконання.
Якщо JavaScript намагається звернутися до іншого джерела, браузер застосовує політику CORS.
Джерело визначається трьома частинами:
протоколом;
доменом;
портом.
Наприклад, сторінка з одного домену не може без додаткового дозволу прочитати відповідь іншого домену.
Сервер може дозволити такий доступ заголовком:
Access-Control-Allow-Origin: https://example.comЯкщо сервер не дозволив запит, у консолі браузера з'явиться помилка CORS. Додавання довільного заголовка в fetch на стороні клієнта не вимикає політику CORS. Дозвіл має надати сервер.
response.okНеправильно:
fetch("/api/users")
.then((response) => response.json())
.then((users) => {
console.log(users);
});Якщо сервер поверне 404 або 500, код усе одно спробує прочитати відповідь як звичайні дані.
Краще:
fetch("/api/users")
.then((response) => {
if (!response.ok) {
throw new Error(`Статус: ${response.status}`);
}
return response.json();
})
.then((users) => {
console.log(users);
})
.catch((error) => {
console.error(error.message);
});Content-TypeЯкщо тіло запиту містить JSON, потрібно перетворити об'єкт на рядок і вказати формат:
fetch("/api/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name: "Іван"
})
});Неправильно передавати звичайний JavaScript-об'єкт без JSON.stringify:
// Помилка: об'єкт не перетворено на JSON
body: {
name: "Іван"
}Неправильно:
const response = await fetch("/api/data");
const text = await response.text();
const data = await response.json();Тіло відповіді вже було прочитано через text().
Потрібно вибрати один відповідний метод:
const response = await fetch("/api/data");
const data = await response.json();fetch автоматично відхилить проміс для 404Статус 404 є HTTP-результатом, а не мережевим збоєм. Перевіряйте response.ok вручну.
Код JavaScript у браузері доступний користувачу. Не можна вважати секретним токен або ключ, який безпосередньо вбудовано у фронтенд-код. Конфіденційні операції зазвичай виконують через сервер, який зберігає секрети безпечніше.
HTTP-запит надсилає клієнт, а HTTP-відповідь повертає сервер.
Запит і відповідь можуть містити стартовий рядок, заголовки та тіло.
Заголовки описують дані, спосіб їх обробки, кешування, авторизацію та інші параметри.
Тіло може містити HTML, JSON, текст, файл або інші дані.
Статуси 2xx означають успіх, 3xx — перенаправлення, 4xx — помилки клієнта, 5xx — помилки сервера.
fetch не вважає статуси 4xx і 5xx помилкою автоматично.
Для перевірки успішності відповіді використовуйте response.ok і response.status.
Мережеві помилки обробляють через catch.
Вкладка Network у DevTools допомагає досліджувати запити, заголовки, тіло, статуси та час виконання.