JavaScript Fetch: междоменные запросы (CORS)

Междоменные запросы являются неотъемлемой частью современной веб-разработки, обеспечивая взаимодействие ресурсов из разных источников. В этой статье мы подробно разберём обработку междоменных запросов с помощью Fetch API в JavaScript. К концу чтения вы получите полное представление о междоменных запросах, научитесь их настраивать и освоите лучшие практики использования Fetch API для эффективного управления ими.

Понимание междоменных запросов

Междоменные запросы возникают, когда веб-приложение запрашивает ресурсы из другого источника (домена, протокола или порта), отличного от собственного. Эти запросы критически важны для доступа к API, получения данных из внешних источников и интеграции сторонних сервисов.

Важность CORS

Cross-Origin Resource Sharing (CORS) — это функция безопасности, реализованная в браузерах для контроля того, как веб-страницы могут запрашивать ресурсы из разных источников. Политики CORS реализуются на стороне сервера с помощью определённых HTTP-заголовков.

Использование Fetch для междоменных запросов

Fetch API предоставляет современный и гибкий способ выполнения HTTP-запросов в JavaScript. Он поддерживает промисы, что упрощает работу с асинхронным кодом.

Базовое использование Fetch

Начнём с простого примера использования Fetch для выполнения GET-запроса. Более подробно об этом можно узнать на нашей предыдущей странице, Fetch API.

---

Output appears here after Run.

Обработка CORS с помощью Fetch

При выполнении междоменных запросов сервер должен включать определённые заголовки, разрешающие запрос. К основным заголовкам относятся:

• Access-Control-Allow-Origin: Указывает, какие источники имеют доступ к ресурсу.
• Access-Control-Allow-Methods: Перечисляет HTTP-методы, разрешённые для междоменных запросов.
• Access-Control-Allow-Headers: Перечисляет заголовки, которые могут быть включены в запрос.

Выполнение междоменных запросов

Чтобы выполнить междоменный запрос с помощью Fetch, установите параметр mode в значение cors. Это режим по умолчанию для междоменных запросов. Он позволяет выполнить запрос, если сервер явно разрешает это с помощью заголовков CORS. Вот пример:

WARNING

Избегайте использования подстановочного знака (*) для Access-Control-Allow-Origin на вашем сервере в продакшене в целях безопасности.

---

Output appears here after Run.

Отправка учётных данных с помощью Fetch

Если ваш междоменный запрос требует передачи учётных данных (например, cookies или HTTP-аутентификации), вы должны включить параметр credentials:

---

async function fetchWithCredentials(url) {
  try {
    const response = await fetch(url, {
      mode: 'cors',
      credentials: 'include'
    });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchWithCredentials('https://api.crossorigin.com/secure-data');

note

Если политика CORS блокирует ответ, браузер возвращает непрозрачный ответ. Вы не сможете прочитать статус или тело ответа, но промис fetch будет отклонён, что позволит перехватить ошибку в блоке catch.

Обработка предварительных запросов

При выполнении определённых типов междоменных запросов браузер сначала отправляет серверу OPTIONS-запрос (предварительный запрос), чтобы определить, безопасно ли отправлять основной запрос. Это происходит для запросов, которые:

• Используют методы, отличные от GET, HEAD или POST.
• Включают пользовательские заголовки.
• Используют заголовок Content-Type со значениями, отличными от application/x-www-form-urlencoded, multipart/form-data или text/plain.

Если предварительный запрос завершается неудачей, браузер генерирует ошибку сети, а не возвращает стандартный код статуса HTTP. Это означает, что ошибка будет перехвачена в блоке catch, а не обработана через response.ok.

Лучшие практики для междоменных запросов Fetch

Защита вашего API

Убедитесь в безопасности вашего API, проверяя и очищая все входящие данные. Используйте HTTPS для шифрования данных при передаче и внедрите надлежащие механизмы аутентификации и авторизации.

Использование подходящих заголовков CORS

Настройте ваш сервер на включение необходимых заголовков CORS. Избегайте использования подстановочного знака (*) для Access-Control-Allow-Origin в продакшене. Вместо этого указывайте точные источники, которым разрешён доступ.

Грамотная обработка ошибок

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

Оптимизация производительности

Минимизируйте количество междоменных запросов, объединяя ресурсы там, где это возможно, и используйте кэширование для сокращения времени загрузки.

Заключение

Освоение междоменных запросов с помощью Fetch API критически важно для современной веб-разработки. Понимая, как настраивать и обрабатывать такие запросы, вы сможете создавать более безопасные, эффективные и надёжные веб-приложения. Следуйте лучшим практикам, описанным в этой статье, чтобы гарантировать правильную и безопасную обработку ваших междоменных запросов.