CORS в React: что это такое, почему это важно и как это включить

Понимание CORS в React

CORS давно является источником путаницы — и разочарования — для разработчиков, особенно начинающих. Концепция может быть непростой для понимания, особенно если вы создаете одностраничные приложения (SPA) с использованием таких фреймворков, как React, Angular или Vue, и пытаетесь взаимодействовать с внешними API.

В этом руководстве я помогу вам понять CORS с нуля. Мы создадим простое приложение на React и сервер на Express, чтобы продемонстрировать, что вызывает ошибки CORS и почему они происходят. Более того, я покажу вам различные способы решения этих проблем — как в общем, так и специально для среды React.

Что такое CORS?

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

Современные веб-приложения обычно состоят из двух ключевых частей: клиента (фронтенда, работающего в браузере) и сервера (обычно API или backend-службы). Когда эти части находятся на разных доменах, портах или протоколах — вступает в силу CORS.

Почему такая архитектура стала популярной

Разделённая архитектура (frontend и backend как отдельные приложения) становится всё более популярной благодаря своей гибкости: один backend может обслуживать разные клиенты — от веб-приложений до мобильных или IoT-устройств.

Политика одного источника и междоменные запросы

Браузеры применяют политику одного источника (Same-Origin Policy), которая ограничивает, как скрипты могут обращаться к ресурсам с других источников. Даже если вы сами разрабатываете и frontend, и backend, браузер может считать такие запросы междоменными.

Вот здесь и вступает в игру CORS — механизм, позволяющий безопасно выполнять такие запросы.

Почему браузеры блокируют междоменные запросы

Когда ваше приложение пытается получить ресурс с другого источника (домен, порт, протокол), браузер применяет политику одного источника и блокирует запрос, если сервер не предоставляет специальные заголовки, разрешающие это.

Решение: CORS

CORS позволяет серверу явно указать, что он разрешает доступ к своим ресурсам с определённого (или любого) источника с помощью заголовков типа Access-Control-Allow-Origin.

Что происходит, когда CORS включён?

Браузер видит заголовки CORS в ответе сервера и разрешает доступ к данным. Это и есть суть CORS — контролируемый доступ между источниками.

🛠️ Шаг 1: Создание сервера Express с API

• Клиент на React, отправляющий HTTP-запросы
• Сервер на Express, отвечающий на эти запросы

mkdir cors-server && cd cors-server
npm init -y
npm install express

Файл app.js:

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

app.get('/', (req, res) => {
  res.send('Welcome to CORS server 😁');
});

app.get('/cors', (req, res) => {
  res.send('This has CORS enabled 🎈');
});

app.listen(8080, () => {
  console.log('Listening on port 8080');
});

⚛️ Шаг 2: Создание приложения React

npx create-react-app react-cors-guide

src/App.js:

useEffect(() => {
  fetch('http://localhost:8080/', { mode: 'cors' })
    .then((res) => res.json())
    .then(console.log)
    .catch(console.error);
}, []);

Ожидаем ошибку CORS, так как порты разные: 3000 и 8080.

Типичная ошибка CORS

Access to fetch at 'http://localhost:8080/' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...

Это означает, что сервер не отправляет заголовок Access-Control-Allow-Origin.

✅ Настраиваем CORS на сервере Express

Обновите app.js:

app.get('/cors', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send({ msg: 'This has CORS enabled 🎈' });
});

🔁 Обновите React-клиент

const response = await fetch('http://localhost:8080/cors', { mode: 'cors' });

Теперь React-приложение сможет получить ответ без ошибки.

🎯 Ограничение доступа по источнику

res.set('Access-Control-Allow-Origin', 'http://localhost:3000');

Рекомендуется использовать такой подход в продакшене.

⚠️ Когда нельзя изменить сервер

Если вы используете сторонний API и не можете настроить сервер, вы можете использовать прокси.

🧞 Прокси в React

{
  "proxy": "http://localhost:8080"
}

После этого запросы к /cors будут автоматически проксированы.

🧹 Заключение: Лучшие практики CORS в React

1. Решайте проблему CORS на стороне сервера.
2. В разработке используйте прокси через package.json.
3. Если не контролируете API, свяжитесь с провайдером или настройте собственный прокси.
4. Не используйте расширения браузера (CORS Unblock) в продакшене.
5. Указывайте { mode: 'cors' } явно в fetch-запросах.
6. Планируйте CORS-конфигурацию заранее для продакшена.