HTTP: запросы, ответы, коды и заголовки

HTTP — протокол, по которому браузер отправляет запрос, а сервер отвечает кодом состояния (200, 301, 404, 500), заголовками и телом.

Разговор по правилам

Когда браузер знает адрес сервера (в прошлых уроках мы разобрались, как), он устанавливает соединение и произносит первую фразу. Язык, на котором идёт разговор, называется HTTP (HyperText Transfer Protocol, протокол передачи гипертекста). Он очень прост по замыслу: клиент просит, сервер отвечает. Всегда в таком порядке: сервер сам ничего не присылает, пока его не спросили. И сервер не помнит, о чём вы говорили минуту назад: каждый запрос для него новый (программисты называют это отсутствием состояния).

В первых версиях HTTP был текстом, который можно прочитать глазами. Поэтому мы можем увидеть его целиком.

Запрос

Вот запрос, который отправляет браузер, когда вы открываете страницу услуг:

GET /uslugi/ HTTP/1.1
Host: www.example.ru
Accept: text/html
Accept-Language: ru
User-Agent: Mozilla/5.0 …

Первая строка говорит, что именно просят: метод (GET, «дай»), путь (/uslugi/) и версию протокола. Дальше идут заголовки: пары «имя: значение», которые сообщают подробности. Host называет сайт, который нужен: к одному серверу могут быть привязаны сотни сайтов, и без этого заголовка он не поймёт, чей нужен. Accept-Language сообщает, какой язык вы предпочитаете. User-Agent рассказывает, что за программа просит.

Основных методов два. GET просит что-то получить, и именно так открываются страницы и картинки. POST отправляет что-то серверу, например данные формы. Есть и другие (PUT, DELETE, HEAD), с ними мы встретимся в части про сервер.

Если запрос что-то отправляет, после заголовков идёт пустая строка и тело: сами данные.

Ответ

Сервер отвечает по такому же шаблону:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 5120
Cache-Control: max-age=3600

<!doctype html>
<html lang="ru"> …

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

Попробуйте сами: выберите метод и адрес, и «сервер» маленького сайта ответит.

GET /uslugi HTTP/1.1
Host: www.example.ru
Accept: text/html
Accept-Language: ru
User-Agent: Mozilla/5.0 …

HTTP/1.1 301 Moved Permanently
Location: /uslugi/
Content-Length: 0

Коды состояния

Код в первой строке ответа самое важное: он говорит, получилось ли. Цифры сгруппированы по первой:

• 2xx: успех. 200 OK: всё хорошо, вот страница.
• 3xx: переадресация. Ищите в другом месте. 301 Moved Permanently: страница переехала навсегда, новый адрес в заголовке Location. 302 Found: переехала временно. 304 Not Modified: с прошлого раза ничего не изменилось, берите свою копию из памяти.
• 4xx: ошибка запроса. Вы попросили что-то не то. 404 Not Found: страницы нет. 403 Forbidden: вам туда нельзя. 405 Method Not Allowed: так к этому адресу обращаться нельзя. 410 Gone: страница была и намеренно удалена. 429 Too Many Requests: вы спрашиваете слишком часто.
• 5xx: ошибка сервера. Сломалось у них, а не у вас. 500 Internal Server Error: что-то пошло не так. 502, 503, 504: сервер недоступен, перегружен или не дождался ответа от другого.

Запоминать все не нужно. Достаточно помнить группы: двойка хорошо, тройка идите туда, четвёрка ваша ошибка, пятёрка наша ошибка.

Заголовки, которые стоит знать

Заголовков много, и их полный список огромен. Вот те, что пригодятся в первую очередь:

• Content-Type: что в теле ответа (text/html, image/png, application/json) и в какой кодировке.
• Location: куда переехала страница, при кодах 301 и 302.
• Cache-Control: как долго можно хранить ответ в памяти, чтобы не просить его снова. Это ускоряет повторные посещения.
• Content-Encoding: сжат ли ответ (gzip или br). Сжатый ответ весит в разы меньше.
• Set-Cookie и Cookie: так сайт запоминает вас между запросами, например что вы вошли в аккаунт.
• Accept-Language: какой язык вы предпочитаете. Сайт на нескольких языках может выбрать нужный по нему.

Все эти заголовки можно посмотреть самому. Откройте инструменты разработчика (F12), вкладку «Сеть», обновите страницу и щёлкните по любому запросу: вы увидите ровно то, о чём шла речь, с настоящими значениями.

Версии HTTP

В течение жизни протокол обновлялся, но смысл остался прежним: «запрос, ответ, коды, заголовки». HTTP/1.1 (1997) был текстовым и открывал по нескольку соединений. HTTP/2 (2015) стал двоичным и позволяет вести много запросов по одному соединению. HTTP/3 (2022) заменил TCP на новый транспорт QUIC, который работает поверх UDP и быстрее восстанавливается после потерь. Страницы от этого не меняются: для автора сайта разницы нет, браузер и сервер договорятся о версии сами. А общие правила записаны в документе RFC 9110, который указан в источниках.

Практика

Вы в эпохе 2010 года. Ваш сайт перестроили, и адреса разделов поменялись. Если просто выкинуть старые адреса, все ссылки на них (из поиска, из соцсетей, из чужих писем) приведут на 404. Чтобы этого не случилось, делают перенаправление: старый адрес отвечает кодом 301 и новым адресом в заголовке Location.

Заполните карту переездов: для каждого раздела вашего проекта старый адрес, новый адрес и код 301. Разделы подставлены из брифа. Потом допишите страницу 404: объясните, что такой страницы нет, и поставьте ссылку на раздел, который ведёт к главному действию вашего сайта. Человек, попавший на 404, не должен остаться в тупике.

Что было не так с 2010 годом

Многие сайты тогда отвечали на несуществующую страницу кодом 200 и текстом «ничего не найдено»: поисковики принимали такие страницы за настоящие. Для человека это незаметно, а для машины это ложь. Хорошая страница 404 говорит правду и коду, и тексту, и человеку, и машине.