Обработка CORS и сетевых ошибок

В React Native поведение при работе с сетевыми запросами отличается от веб-браузеров, особенно в части CORS (Cross-Origin Resource Sharing).

CORS — это механизм безопасности браузера, который блокирует запросы к доменам, отличным от того, с которого загружена веб-страница. Однако в React Native CORS не применяется, потому что приложение не работает внутри браузерного контекста. Вместо этого запросы выполняются через нативные сетевые стеки: NSURLSession на iOS и OkHttp на Android. Это означает, что вы можете свободно отправлять запросы на любой сервер без необходимости настройки прокси или изменения заголовков CORS на бэкенде.

Тем не менее, остаются другие типы ошибок, которые необходимо обрабатывать:

Сетевые ошибки

Сетевые ошибки возникают, когда устройство не может установить соединение с сервером. Примеры:

Отсутствует интернет-соединение
Сервер недоступен
Неверный URL или DNS-ошибка

Такие ошибки перехватываются в блоке catch при использовании fetch:

try {
  const response = await fetch('https://api.example.com/data');
  // ...
} catch (error) {
  // Сюда попадаем только при сетевой ошибке
  console.error('Нет подключения к сети:', error);
}

Важно: если сервер ответил (даже статусом 500), это не считается сетевой ошибкой — промис не будет отклонён. Поэтому для полной обработки ошибок нужно комбинировать catch и проверку response.ok.

Проверка HTTP-статуса

Даже при успешном соединении сервер может вернуть ошибку (4xx, 5xx). Чтобы её обнаружить, проверяйте свойство ok:

const response = await fetch('https://api.example.com/data');
if (!response.ok) {
  throw new Error(`Ошибка сервера: ${response.status}`);
}

Комбинированная обработка

Полный пример безопасного запроса:

const loadData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    if (error instanceof TypeError) {
      // Ошибка сети (например, "Network request failed")
      throw new Error('Нет подключения к интернету');
    } else {
      // Ошибка от сервера или другая логическая ошибка
      throw error;
    }
  }
};

В пользовательском интерфейсе такую ошибку можно отобразить как понятное сообщение: «Проверьте подключение к интернету» или «Сервер временно недоступен».

Важно

Хотя CORS не мешает запросам в React Native, сервер всё равно должен корректно обрабатывать входящие запросы. Например, если API требует определённые заголовки (Authorization, Content-Type), их нужно указывать явно в настройках fetch.

Эта особенность упрощает разработку, но не отменяет необходимость надёжной обработки всех возможных сценариев сбоя.