Блок 3 · Урок 4 из 4

Чужие API на практике

Что нужно знать, когда приложение обращается к чужим сервисам — оплата, карты, AI: ключи, лимиты и деньги, вебхуки и почему браузер пишет «CORS blocked».

≈ 9 минут 🌐 внешние сервисы 🎯 цель: понимать ключи, стоимость, вебхуки и фикс CORS

Зачем это вам

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

Четыре реальности чужих API

Ключи, лимиты, вебхуки и CORS

Чужой API — это не «бесплатная розетка». Это платный сервис, который узнаёт вас по секретному ключу, считает деньги за каждый вызов, сам уведомляет о событиях — и не пускает напрямую из браузера.

Тема Суть Что важно заказчику
API-ключ Секретный «пропуск», по которому чужой сервис узнаёт и тарифицирует вас. Нельзя светить в коде, в браузере, в git. Утечка — чужой ходит за ваш счёт.
Лимиты и стоимость
(rate limit)
Сервис ограничивает, сколько запросов можно сделать за период. Превышение → ответ 429 Too Many Requests.1 Каждый вызов AI или карт может стоить реальных денег. Следить за лимитами — обязательно.
Вебхук
(webhook)
«API наоборот»: вы даёте сервису свой адрес-эндпоинт, и он сам шлёт запрос, когда происходит событие.2 Не нужно постоянно спрашивать «ну что, готово?» — сервис сам дёргает ваш адрес, когда, например, оплата прошла.
CORS
(Cross-Origin Resource Sharing)
Правило безопасности браузера: запрос со страницы на чужой домен блокируется, если тот явно не разрешил.3 Классическая ошибка «CORS blocked / No 'Access-Control-Allow-Origin'». Решение — ходить к чужому API не из браузера, а через свой сервер.

Подробнее о каждой теме

API-ключ — это длинная случайная строка, которую сервис выдаёт при регистрации. По ней он понимает, кто делает запрос и сколько с кого списывать. Потерял контроль над ключом — кто-то другой пользуется сервисом за ваши деньги. Поэтому ключ хранят только на сервере, никогда не кладут в JavaScript-код, который идёт в браузер, и никогда не коммитят в git-репозиторий. Подробно об этом — блок 5 про секреты и безопасность.

Лимиты и стоимость. Чужие API почти всегда ограничивают нагрузку: например, не больше 60 запросов в минуту (rate limit — лимит запросов за период). Превышение возвращает HTTP-статус 429 Too Many Requests — браузер или сервер получает отказ вместо данных.1 Помимо лимита — цена: AI-сервисы тарифицируют по токенам (единица текста ~4 символа), картографические — по запросам. Заказчику важно понимать: каждый вызов может стоить денег, и неоптимальный код (например, вызов AI на каждое нажатие клавиши) может принести большой счёт.

Вебхук — это «звонок обратно». Вместо того чтобы ваше приложение каждую секунду спрашивало платёжный сервис «оплата прошла?», вы заранее даёте ему URL своего сервера — эндпоинт (адрес-«окошко»). Когда событие случается (оплата прошла, посылка отправлена, пользователь подписался), сервис сам шлёт HTTP POST-запрос на этот адрес.2 Ваш сервер получает уведомление и реагирует — например, открывает доступ к курсу. Это экономит запросы и даёт мгновенную реакцию.

CORS расшифровывается как Cross-Origin Resource Sharing — «совместное использование ресурсов между разными источниками». Браузер по умолчанию не позволяет JavaScript на одной странице делать запросы к другому домену — это защита от кражи данных.3 Если чужой API не добавил специальный заголовок Access-Control-Allow-Origin с разрешением, браузер блокирует запрос и выводит ошибку «CORS blocked». Стандартное решение: ходить к чужому API не из браузера, а с собственного сервера. Сервер ограничения CORS не имеет, и там же безопасно лежит ключ — двойная польза. Это прямая связь с темой блока 1 о том, где выполняется код.

📌 Запомните одной фразой: чужой API — это чужой платный сервис: по ключу узнают и считают деньги, по лимиту тормозят (429), вебхуком уведомляют, а из браузера напрямую не пускают (CORS) — ходи через свой сервер.

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

Чужой платный сервис по именному пропуску

Именной пропуск-абонемент — API-ключ: по нему сервис узнаёт и тарифицирует вас. Покажете чужому — будут ходить за ваш счёт.
Тариф: лимит и цена — rate limit + стоимость за запрос. Не больше N обращений в час, каждое стоит денег. Превысите — турникет не пускает (429).
«Вам перезвонят, когда готово» — вебхук: не вы дёргаете сервис, а оставляете номер, и он сам звонит, когда событие случилось.
Охранник не пускает с улицы — CORS: из браузера напрямую нельзя. Проще отправить своего курьера (свой сервер) — у него и пропуск с собой, и охранник не задерживает.

К чужому сервису ходят по пропуску, по тарифу, и удобнее — через своего курьера (свой сервер).

Запомните одно

Чужой API — это платный сервис по именному пропуску

Поэтому ключ берегут как пароль — его утечка означает чужие расходы за ваш счёт. За вызовы платят и следят за лимитами — неожиданный трафик может принести большой счёт. А из браузера к чужому API ходят через свой сервер: там нет CORS-ограничения и там же в безопасности лежит ключ.

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

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

«Положи ключ в переменные окружения»
Не храните секретный API-ключ в коде или в браузере. Держите в защищённом месте на сервере — в переменных окружения (environment variables). Подробно — блок 5.
«Ловим 429»
Упёрлись в лимит запросов чужого API (rate limit). Нужно делать запросы реже, добавить задержку между ними или перейти на более высокий тариф.
«Повесим webhook»
Дадим сервису адрес-«окошко» на нашем сервере, чтобы он сам уведомлял нас о событии. Например, платёжный сервис пришлёт запрос, когда оплата прошла — не надо постоянно спрашивать.
«CORS blocked — перенесём вызов на сервер»
Браузеру запрещён прямой запрос к чужому домену. Запрос пойдёт через наш бэкенд (серверная часть приложения) — там нет CORS-ограничения, и ключ там же в безопасности.

API-ключ (API key) — секретный «пропуск», по которому чужой сервис узнаёт и тарифицирует вас; хранить в секрете, только на сервере (подробно — блок 5).

Rate limit (лимит запросов) — ограничение, сколько запросов можно сделать к API за период; превышение даёт ответ 429 Too Many Requests.

Вебхук (webhook) — обратный запрос: сервис сам уведомляет ваше приложение о событии, отправляя HTTP POST на ваш эндпоинт (адрес-«окошко» на сервере).

CORS (Cross-Origin Resource Sharing) — правило безопасности браузера, ограничивающее запросы JavaScript-кода со страницы на другой домен; типичная ошибка — «CORS blocked / No 'Access-Control-Allow-Origin'».

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

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

1. Что такое API-ключ?

2. Ответ 429 Too Many Requests означает…

3. Что такое вебхук?

4. Агент видит «CORS blocked» и переносит вызов чужого API на сервер, потому что…

Куда мы идём

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