Access to fetch at … has been blocked by CORS policy?

Ошибка "Access to fetch at ... has been blocked by CORS policy" происходит тогда, когда веб-приложение, написанное с использованием React Native, пытается сделать запрос к серверу на другом домене, но получает блокировку от политики CORS (Cross-Origin Resource Sharing). Эта политика предназначена для защиты пользователей, ограничивая доступ к ресурсам на других доменах.

Политика CORS обычно применяется на серверной стороне, но может также блокировать запросы на клиентской стороне. Для решения этой проблемы есть несколько подходов, которые можно использовать в зависимости от вашей ситуации.

1. Настройте сервер: Если у вас есть доступ к серверу, где размещена API, к которому вы пытаетесь обратиться, вы можете добавить заголовки CORS на серверной стороне. Это позволит браузеру клиента обращаться к серверу через React Native. Пример кода сервера на Node.js:

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

// Другие настройки сервера...

app.listen(3000, () => {
    console.log('Сервер запущен на порту 3000');
});

Этот код устанавливает заголовки CORS для разрешения запросов с любого источника ('*'). Вы также можете настроить эти заголовки более точно, указав только определенные домены.

2. Используйте проксирование запросов: Если у вас нет доступа к серверу или не хотите изменять его настройки, вы можете использовать проксирование запросов. React Native позволяет настроить прокси для перенаправления запросов к серверу через свой собственный сервер разработки.

Вам нужно добавить файл setupProxy.js в корневую директорию вашего проекта. В нем вы можете определить прокси-настройки:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://example.com',
            changeOrigin: true,
        })
    );
};

В этом примере все запросы, которые начинаются с /api, будут перенаправлены на http://example.com. Вы должны изменить target на URL сервера, к которому вы хотите обратиться.

3. Используйте пакет react-native-cors: Если вам не удается настроить сервер или использовать проксирование запросов, вы можете установить пакет react-native-cors в вашем проекте. Этот пакет добавляет поддержку CORS в React Native приложение.

Установите пакет с помощью npm:

npm install react-native-cors

Затем импортируйте его в ваш проект:

import 'react-native-cors';

Эта библиотека позволяет обойти политику CORS, изменяя заголовки запроса. Однако заметьте, что это не рекомендуется использовать в продакшене, так как она предназначена только для разработки.

Иногда включение режима разработки в React Native также может помочь обойти ошибку CORS, но это не рекомендуется использовать в продакшене.

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