Как сделать запрос на сайте в 2026: форма, поиск и обращение к API

На сайте запросом называют сразу три разные вещи: форму, через которую посетитель оставляет заявку, строку поиска по страницам и обращение самой страницы к внешнему сервису за данными. Первые две задачи закрываются готовыми блоками за вечер, третья требует понимания, как устроен обмен данными. Ниже разбираем все три и подробно показываем третью: как отправить запрос со своей страницы, где хранить ключи и почему запрос иногда не доходит.

Три задачи, которые на сайте называют запросом

Прежде чем что-то собирать, полезно понять, какая из трёх задач перед вами. Решаются они разными инструментами, и путаница тут стоит нескольких вечеров.

• Форма обращения. Посетитель заполняет имя и телефон, вы получаете заявку в почту, в Telegram или в таблицу. Готовые сервисы и код формы разобраны в материале о том, как сделать сайт с формой заявки.
• Поиск по сайту. Человек вводит слово в строку и получает список подходящих страниц. Виджеты Яндекса и Google, свой фильтр на JavaScript и поисковые движки собраны в статье про поиск на своём сайте.
• Обращение к внешнему сервису. Страница сама идёт за данными: курс валют, ответ нейросети, запись клиента в CRM. Это самая техническая из трёх задач, ей посвящена основная часть статьи.

Технически все три сводятся к одному: браузер отправляет данные по адресу и ждёт ответ. Разница в том, что уходит и что приходит обратно.

Как устроен запрос: адрес, метод, тело и ответ

Представьте посылку: у неё есть адрес получателя, способ доставки, вложение и уведомление о вручении. У запроса ровно то же самое, только части называются иначе.

• Адрес. Ссылка на сервис, к которому обращается страница, например https://api.example.com/leads.
• Метод. GET когда вы просите данные, POST когда отправляете свои. Есть ещё PUT и DELETE, в небольших проектах они нужны редко.
• Заголовки. Служебные пометки: в каком формате данные (Content-Type: application/json) и кто именно обращается (ключ доступа).
• Тело. Сами данные, чаще всего в формате JSON: набор пар «поле и значение».
• Ответ. Сервис возвращает данные и код статуса: 200 всё в порядке, 401 не принят ключ, 404 адрес не найден, 429 обращений слишком много.

В браузере такой запрос отправляет встроенная функция fetch(): она есть во всех современных браузерах и не требует подключать библиотеки (документация MDN). Одну её особенность стоит запомнить сразу: ответ со статусом 404 или 500 для fetch() не ошибка, вызов завершится успешно, и статус придётся проверять в коде самому.

fetch('https://api.example.com/leads', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Анна', phone: '+7 900 000-00-00' })
})
  .then(function (response) {
    if (!response.ok) throw new Error('Статус ' + response.status);
    return response.json();
  })
  .then(function (data) { console.log('Приняли:', data); })
  .catch(function (error) { console.log('Не отправилось:', error); });

По теме: Как сделать сайт услуг в 2026: каталог, цены и запись клиентов

Как сделать запрос с помощью ИИ: по шагам

Писать это руками не обязательно. Задача типовая, ассистент собирает её с первой попытки, если объяснить условия. Порядок работы такой.

1. Опишите, что и куда уходит. Один абзац: какие поля в форме, на какой адрес отправляем, что человек увидит после отправки. Без этого ассистент придумает структуру данных за вас, и она не совпадёт с той, которую ждёт сервис.
2. Попросите код целиком, вместе с обработкой ошибок. Отдельно проговорите: заблокировать кнопку на время отправки, показать понятное сообщение при неудаче, не стирать введённый текст.
3. Вставьте код на страницу и откройте её в браузере. Обращения к чужим адресам честнее проверять уже на хостинге: локально браузер ведёт себя иначе.
4. Откройте вкладку Network в инструментах разработчика. Клавиша F12, вкладка Network, отправьте форму: появится строка вашего запроса, у неё видно адрес, статус и тело ответа. Это главный инструмент отладки.
5. Проверьте неудачный сценарий. Испортите адрес намеренно и посмотрите, что увидит посетитель. Кнопка, которая молча ничего не делает, теряет заявки надёжнее любой ошибки.
6. Вынесите ключ на сервер, если сервис требует ключ. Как это устроено, разбираем ниже.

Рабочая формулировка задачи для ассистента выглядит примерно так:

Добавь на страницу форму с полями «Имя» и «Телефон».
По кнопке отправляй POST-запрос на /api/lead в формате JSON.
Пока идёт отправка: кнопка заблокирована, на ней текст «Отправляем».
Если статус ответа не 200, покажи текст ошибки под формой,
введённые данные не стирай.
Никаких ключей и токенов в коде страницы быть не должно.

Просите ассистента показывать состояние отправки прямо на странице. Половина жалоб «форма не работает» это не поломка, а тишина: человек нажал кнопку, ничего не изменилось, он закрыл вкладку.

Ключи и токены: зачем запросу серверная прослойка

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

Разработчики API предупреждают об этом прямым текстом. Чтобы обратиться к API Anthropic из браузера, нужно вручную добавить заголовок anthropic-dangerous-direct-browser-access, и слово dangerous в названии стоит не для красоты: со своим ключом в коде страницы вы отдаёте его всем посетителям сразу (разбор появления заголовка).

С Telegram та же логика. Токен бота в коде страницы означает, что писать от имени вашего бота сможет кто угодно, а лимиты у бота общие: примерно 30 сообщений в секунду на всех (Telegram Bots FAQ). Как аккуратно связать сайт с ботом, показано в разборе связки сайта и Telegram.

Решение одно: небольшая серверная прослойка. Страница отправляет запрос на ваш собственный адрес, прослойка добавляет ключ и уже от себя обращается к сервису. Полноценный сервер для этого держать не нужно, хватает бессерверной функции.

• Cloudflare Workers: на бесплатном плане 100 000 запросов в сутки и 10 мс процессорного времени на запрос, причём ожидание ответа от чужого сервиса в это время не засчитывается (лимиты Workers).
• Yandex Cloud Functions: первый миллион вызовов функций в месяц не тарифицируется (free tier бессерверных сервисов). Вариант удобен тем, что оплата российская.
• Готовый сервис форм. Если весь ваш запрос это заявка с сайта, прослойку писать незачем: сервис сам принимает данные и пересылает их вам.

Где берут ключ и как его хранить, подробно показано на примере Claude в статье о том, как получить API-ключ.

По теме: Как сделать меню на сайте в 2026: шапка, бургер, якоря

Почему запрос не проходит: частые причины

• Ошибка CORS. Браузер не пускает вашу страницу к чужому адресу, пока тот не разрешит обращение заголовком Access-Control-Allow-Origin. Чинится на стороне сервиса или той самой прослойкой (что такое CORS, MDN).
• Статус 401 или 403. Ключ не передан, передан не в том заголовке или уже недействителен.
• Статус 429. Обращений слишком много за короткое время. Помогает пауза перед повтором и блокировка кнопки от двойных нажатий.
• Смешанный контент. Сайт открыт по https, а запрос уходит на http: браузер заблокирует такой запрос молча.
• Опечатка в адресе или неверный метод. Сервис ждёт POST, страница шлёт GET, в ответ приходит 404 или 405.
• Ответ пришёл, но код его не разобрал. Сервис вернул текст ошибки вместо JSON, страница пытается прочитать его как JSON и останавливается.

Диагностика всегда начинается одинаково: откройте Network, найдите строку своего запроса, посмотрите статус и тело ответа. Этот текст можно отдать ассистенту вместе с кодом и попросить объяснить причину.

Что подключают к сайту таким способом

• Приём заявок: данные из формы уходят в почту, в Telegram или в таблицу.
• Ответ нейросети: посетитель пишет вопрос, страница передаёт его модели и показывает ответ.
• Данные со стороны: курс валют, погода, расписание, наличие товара.
• Запись в CRM: заявка попадает туда, где вы с ней работаете, без ручного переноса.

Механика везде одна, меняются только адрес, формат данных и способ авторизации. Разобравшись с одним запросом, следующие вы соберёте по образцу.

Частые вопросы

Можно ли сделать запрос на сайте без программирования?

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

Нужен ли сервер, чтобы форма отправляла заявки?

Для готового сервиса форм нет, он сам принимает данные и пересылает их вам. Свой сервер или бессерверная функция нужны тогда, когда вы отправляете данные самостоятельно и в деле участвует ключ или токен.

Почему у меня всё работает, а у посетителей нет?

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

Сколько стоит держать такую прослойку?

Для небольшого сайта обычно нисколько: бесплатных лимитов Cloudflare Workers и Yandex Cloud Functions хватает с запасом. Платить начинают уже при заметном трафике.

Как понять, что запрос вообще ушёл?

Откройте инструменты разработчика (F12), вкладку Network и повторите действие. Строки нет, значит код не выполнился, ищите ошибку во вкладке Console. Строка есть, смотрите её статус и ответ.