Как связать фронтенд и бэкенд — пошагово, на обычном fetch

У тебя есть красивая страница в браузере (фронтенд) и сервер, который что-то знает — список товаров, профиль, погоду (бэкенд). Между ними пропасть, и это классическая стена новичка: «как заставить их разговаривать?». Хорошая новость — мост наводится одним запросом. Разберём на живом примере, за пять шагов.

Что с чем соединяем

Быстро, чтобы не путаться: фронтенд — то, что в браузере (кнопки, текст). Бэкенд — программа на сервере, которая отдаёт данные. Общаются они через API: у бэкенда есть адрес (эндпоинт), по которому фронт спрашивает, а бэк отвечает. Обычно ответ приходит в формате JSON. Наша задача — сделать этот один запрос от фронта к бэку и показать ответ.

Шаг 1. Подними бэкенд и узнай его адрес

Сначала бэкенд должен работать и слушать запросы. Запусти его — в консоли появится что-то вроде listening on http://localhost:4000. Значит, у него есть эндпоинт, например http://localhost:4000/api/hello, который отдаёт данные. Запиши этот адрес — он нужен фронту.

Шаг 2. Проверь эндпоинт ещё до фронта

Не пиши фронт вслепую. Открой адрес эндпоинта прямо в браузере (для простых запросов на чтение это работает) или дёрни через терминал:

curl http://localhost:4000/api/hello

Если в ответ пришёл JSON вроде {"message":"привет"} — бэкенд жив, адрес верный. Половина жалоб «фронт не видит бэкенд» лечится прямо здесь: выясняется, что адрес не тот или сервер вообще не запущен.

Шаг 3. С фронта сделай запрос через fetch

Теперь со стороны браузера. fetch — встроенная команда «сходи по адресу и принеси ответ»:

const res = await fetch("http://localhost:4000/api/hello"); const data = await res.json(); console.log(data);

Первая строка идёт на бэкенд, вторая разбирает JSON-ответ в объект, третья печатает его в консоль. Открой консоль браузера (F12) — если там твой объект, связь есть.

Шаг 4. Покажи данные на странице

Данные в руках — осталось вывести их пользователю. Вместо console.log положи значение в элемент страницы:

document.querySelector("#out").textContent = data.message;

Всё: фронт спросил, бэк ответил, пользователь увидел. Это и есть «связал».

Шаг 5. Скорее всего, ты словишь CORS — и это нормально

На шаге 3 в консоли часто вылезает красное про CORS policy. Не пугайся: это не баг твоего кода, а защита браузера — он не пускает фронт с одного адреса на бэкенд с другого, пока бэкенд явно не разрешит. Чинится это на стороне бэкенда — добавить разрешающий заголовок. Полный разбор — как починить ошибку CORS.

Что получится

Рабочая цепочка: страница в браузере дёргает твой сервер и показывает его ответ вживую. Это фундамент почти любого приложения — лента, профиль, корзина устроены так же, просто эндпоинтов больше. Дальше меняй GET на POST, чтобы не только читать данные с сервера, но и отправлять их туда — например, сохранять форму.

Обязательно ли fetch — или нужна библиотека вроде axios?

Не обязательно. fetch встроен в браузер, его хватает для старта — никакой установки. Библиотеки вроде axios добавляют удобства (короче код, авто-разбор JSON, перехват ошибок), но это надстройка. Начни с fetch, перейдёшь позже, если припечёт.

Почему запрос работает из curl, но не из браузера?

Почти всегда это CORS (шаг 5): curl и браузер по-разному относятся к защите. Если curl отдаёт данные, а fetch — красное в консоли, дело не в бэкенде «в целом», а в разрешении именно для браузера. Правь заголовки на бэкенде — и запрос из фронта оживёт.