How to Test REST APIs in Your Browser — A Developer's Guide

Что такое тестирование API?

Почти каждое современное веб- и мобильное приложение опирается на API. Когда вы открываете ленту в соцсети, оформляете заказ в интернет-магазине или смотрите прогноз погоды на телефоне, в фоне выполняется вызов API. Тестирование API — это практика отправки запросов к таким конечным точкам и проверки ответов: корректный код состояния, ожидаемая структура данных и приемлемая производительность.

В отличие от тестирования через интерфейс, тестирование API работает на уровне ниже UI. Оно помогает находить ошибки раньше, выполняется быстрее и покрывает сценарии, которые трудно воспроизвести одним кликом в браузере. Независимо от того, разрабатываете ли вы собственный API или подключаетесь к стороннему сервису, умение быстро проверять эндпоинты — базовый навык разработчика.

Методы HTTP в REST

REST API используют стандартные методы HTTP, чтобы указать действие над ресурсом. Краткая справка:

Метод	Назначение	Тело запроса
GET	Получить ресурс или коллекцию	Нет
POST	Создать новый ресурс	Да
PUT	Полностью заменить ресурс	Да
PATCH	Частично обновить ресурс	Да
DELETE	Удалить ресурс	Редко

Важно: PUT заменяет ресурс целиком — поля, которые вы не передадите, могут быть сброшены или удалены. PATCH меняет только переданные поля. В большинстве API для частичных правок используют PATCH, а для полной замены — PUT.

Как тестировать API в браузере

Не обязательно ставить Postman или заучивать флаги cURL. Инструмент API Explorer на JSONTech.net позволяет отправлять запросы в режиме браузера для API с открытым CORS или переключаться в прокси-режим, когда браузер блокирует запрос. Порядок действий:

1. Откройте API Explorer.
2. В списке выберите метод HTTP: GET, POST, PUT, PATCH или DELETE.
3. Укажите URL эндпоинта. Например: https://jsonplaceholder.typicode.com/posts/1
4. При необходимости добавьте заголовки (например Content-Type или Authorization).
5. Для методов с телом (POST, PUT, PATCH) введите JSON в редакторе тела запроса.
6. Нажмите Send и разберите ответ: код состояния, заголовки и отформатированное тело JSON.

Если браузер покажет ошибку CORS, переключите API Explorer в прокси-режим. Тогда реальный запрос пройдет через edge-инфраструктуру JSONTech, и вы сможете продолжить тестирование прямо на этой странице.

Пример: получение поста

GET https://jsonplaceholder.typicode.com/posts/1

Response (200 OK):
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\\nsuscipit recusandae consequuntur..."
}

Пример: создание поста

POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json

{
  "title": "My New Post",
  "body": "This is the content of my post.",
  "userId": 1
}

Response (201 Created):
{
  "id": 101,
  "title": "My New Post",
  "body": "This is the content of my post.",
  "userId": 1
}

Заголовки запроса

Заголовки передают метаданные: в каком формате тело, кто вы, какие ожидания по ответу и кэшу. Чаще всего используются такие:

Заголовок	Назначение	Пример значения
Content-Type	Формат тела запроса	application/json
Accept	Желаемый формат ответа	application/json
Authorization	Данные для аутентификации	Bearer eyJhbGciOi...
Cache-Control	Правила кэширования	no-cache
User-Agent	Идентификация клиента	MyApp/1.0

Отсутствие Content-Type: application/json у запросов POST/PUT — одна из самых частых причин ответа 400 Bad Request: без этого сервер не знает, как разобрать тело.

Способы аутентификации

В продакшене большинство API требуют аутентификации. Три типичных варианта:

Bearer Token (JWT)

Распространённый подход для современных API: токен передаётся в заголовке Authorization:

{
  "headers": {
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
    "Content-Type": "application/json"
  }
}

Basic Authentication

Имя пользователя и пароль кодируются в Base64. Простой способ, но безопасен только по HTTPS:

{
  "headers": {
    "Authorization": "Basic dXNlcm5hbWU6cGFzc3dvcmQ=",
    "Content-Type": "application/json"
  }
}

API Key

Иногда ключ передают отдельным заголовком или query-параметром:

// As a header
{
  "headers": {
    "X-API-Key": "sk_live_abc123def456"
  }
}

// As a query parameter
GET https://api.example.com/data?api_key=sk_live_abc123def456

Как читать ответы API

Ответ показывает, что произошло на стороне сервера. Обычно смотрят три вещи: код состояния, заголовки ответа и тело.

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

Код	Значение	Когда встречается
200	OK	Успешный GET, PUT, PATCH или DELETE
201	Created	Успешный POST, создан новый ресурс
400	Bad Request	Некорректный JSON, нет обязательных полей, неверные типы
401	Unauthorized	Нет токена или срок его действия истёк
403	Forbidden	Аутентификация есть, но прав недостаточно
404	Not Found	Нет такого эндпоинта или ресурса
500	Internal Server Error	Ошибка на стороне сервера

Заголовки ответа

Имеет смысл обращать внимание на Content-Type (формат тела), X-RateLimit-Remaining (сколько запросов осталось) и Retry-After (когда повторить запрос после лимита).

Тело JSON

Данные приходят в теле ответа. У аккуратно спроектированного API структура часто единообразна:

{
  "data": {
    "id": 42,
    "name": "Widget",
    "price": 9.99
  },
  "meta": {
    "request_id": "req_8f3a2b"
  }
}

При ошибке вместо объекта с данными приходит объект с описанием ошибки. Сначала проверяйте код состояния, затем разбирайте тело.

CORS: что это и почему появляются ошибки

Cross-Origin Resource Sharing (CORS) — механизм безопасности браузера. Если JavaScript со страницы localhost:3000 обращается к API на api.example.com, браузер заблокирует запрос, пока сервер явно не разрешит источник через CORS-заголовки.

Типичное сообщение об ошибке:

Access to fetch at 'https://api.example.com/data' from origin
'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.

Это не обязательно баг в вашем коде — так браузер защищает пользователя. Исправлять нужно на стороне сервера или обходить ограничение иначе. Частые подходы:

• Попросить владельца API добавить ваш origin в Access-Control-Allow-Origin.
• Использовать прокси — прогонять запросы через свой бэкенд (например API route в Next.js или простой сервер на Express), чтобы не упереться в ограничение «другой источник» в браузере.
• Воспользоваться браузерным инструментом с прокси-режимом, например API Explorer. Для открытых API начните с режима браузера, а если нужен обход CORS для теста, переключитесь в режим, где JSONTech ретранслирует запрос.

CORS касается только браузера. cURL, Postman и серверный код не живут в песочнице браузера и не подчиняются тем же правилам CORS.

Типичные ошибки при тестировании API

То, на чём спотыкаются и новички, и опытные разработчики при незнакомом API:

1. Забыли заголовок Content-Type. JSON в теле без Content-Type: application/json часто приводит к отказу или неверному разбору запроса.
2. Отправили данные через GET. У GET не должно быть тела; для передачи данных нужны POST, PUT или PATCH.
3. Не смотрят на код состояния. 200 с текстом ошибки в теле — не успех. Ориентируйтесь на реальный HTTP-код.
4. Вшили секреты в URL. По возможности не кладите ключи и токены в query string: URL попадают в логи, историю и заголовок Referer.
5. Проверяют только «счастливый путь». Стоит слать битый JSON, пустое тело, пропускать обязательные поля и подставлять невалидные токены — так видно реальное поведение API при ошибках.
6. Игнорируют лимиты. Многие API отвечают 429 при превышении квоты; заголовок X-RateLimit-Remaining лучше проверять заранее.
7. Путают CORS с ошибкой сервера. При CORS браузер мог заблокировать ответ до того, как вы его увидите — сервер при этом иногда уже ответил успешно.

Попробуйте сами

Хотите проверить запрос в деле? Откройте API Explorer и отправьте GET на https://jsonplaceholder.typicode.com/users/1 — в одном месте будут код состояния, заголовки и отформатированный JSON, а если другой API упрется в CORS, вы сможете повторить запрос в прокси-режиме.

Без загрузок, регистрации и настройки: выберите метод, введите URL и нажмите Send.