Блок 1 · Урок 5 из 7

Анатомия URL

Адрес в строке браузера — не случайный набор символов, а аккуратная структура, как почтовый адрес. Научитесь читать его части — и «странная ссылка» превратится в карту.

⏱ ≈ 6 минут 🔗 разбираем адрес по косточкам 🎯 цель: читать ссылки

Зачем это вам

«Добавь query-параметр», «эндпоинт по пути /api/users», «это другой домен — будет CORS», «у тебя порт 3000 занят» — всё это про части URL. Когда вы видите в адресе структуру, вы понимаете, куда уходит запрос, что именно он просит и чем отличается локальная версия от продакшена. Для аудитории разбор URL — простой и эффектный способ показать, что «магическая ссылка» на самом деле читается по слогам.

Главное

Один адрес — пять частей

Возьмём типичную ссылку и разложим по цветам:1

https://shop.example.com/catalog/42?color=red#reviews
https://
Схема (протокол). Как связываемся. https — зашифрованно (см. прошлый урок).
shop.example.com
Домен (хост). Какой сервер отвечает — куда вообще идёт запрос.
/catalog/42
Путь. Что именно просим у этого сервера — конкретный раздел или ресурс.
?color=red
Query-параметры. Доп. уточнения: фильтры, настройки, поиск. После ?, пары имя=значение.
#reviews
Фрагмент (якорь). Место на самой странице, куда прокрутить. На сервер не отправляется.

📌 А где порт? Иногда после домена стоит :число — это порт, конкретная «дверь» на сервере. Обычно он скрыт (для https подразумевается 443), но вы видите его в разработке: localhost:3000 — это «мой компьютер, дверь 3000».

Аналогия, которую можно пересказать

Почтовый адрес

URL устроен как адрес на конверте — просто читается слева направо «сверху вниз по точности»:

домен— город, улица и дом: куда вообще нести письмо (какой сервер).
порт— подъезд / дверь в этом доме (обычно по умолчанию).
путь— номер квартиры: что именно внутри вам нужно.
?query— пометки на конверте: «красный вариант», «оставить у консьержа».
#фрагмент— комната в квартире: куда пройти, уже оказавшись внутри.

Запомните одно разделение

Домен — «кто», путь — «что», query — «как»

Домен решает, какой сервер ответит. Путь — что у него попросить. Query — какие уточнения к запросу. Разложив любую ссылку так, вы сразу понимаете, куда она ведёт и что делает.

Два практичных следствия. Первое: localhost:3000 и ваш-сайт.ru — это один и тот же запрос, но к разным доменам (своя машина против продакшена) — отсюда «у меня работает, на проде нет». Второе: если запрос уходит на другой домен, чем сам сайт, браузер включает защиту — то самое «CORS» (разберём в блоке про API).

Что это даёт на практике

Фраза агента → что он имеет в виду

«Передадим через query-параметр»
Добавим в конец адреса ?имя=значение — уточнение (фильтр, поиск), без новой страницы.
«Эндпоинт по пути /api/users»
Адрес на сервере, по которому лежат нужные данные (про API — блок 3).
«Это другой origin / домен»
Запрос уходит на другой сервер, чем сам сайт → включится защита CORS.
«Открой localhost:3000»
Локальная версия на вашем компьютере, порт 3000 — это ещё не продакшен.

URL — адрес ресурса в вебе; состоит из схемы, домена, (порта), пути, query и фрагмента.

Домен (хост) — имя сервера, который отвечает (shop.example.com).

Путь — что именно запрашиваем у сервера (/catalog/42).

Query-параметры — уточнения после ? в виде имя=значение.

Порт — «дверь» на сервере (:3000); обычно скрыт, виден в разработке.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. В адресе https://shop.ru/catalog/42 какая часть — домен?

2. Что обычно передаётся в query-параметрах (после ?)?

3. Что такое :3000 в localhost:3000?

4. Какая часть URL не отправляется на сервер, а указывает место на странице?

Куда мы идём

Программа курса — 7 блоков