Как настроить CORS в React приложении?react-91

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

Основные способы настройки CORS для React

1. Настройка CORS на сервере

Лучшее решение — настроить CORS на сервере (бэкенде), добавив соответствующие заголовки:

// Пример для Node.js (Express)
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); // или '*' для всех доменов
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

2. Проксирование в development-режиме

В Create React App можно настроить прокси в package.json:

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

Или создать файл setupProxy.js (для более сложных сценариев):

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

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

3. Использование CORS расширений для браузера

Временное решение для разработки — расширения вроде "CORS Unblock", но это небезопасно для production.

4. Обход CORS через собственный сервер

Можно создать промежуточный сервер, который будет делать запросы к API:

// Пример простого прокси-сервера
app.get('/api/data', async (req, res) => {
  const response = await fetch('https://external-api.com/data');
  const data = await response.json();
  res.json(data);
});

5. Настройка CORS для production-сборки

Для production нужно:

  1. Размещать фронтенд и бэкенд на одном домене
  2. Или явно указать разрешенные домены в заголовках сервера
  3. Для статических файлов (если используете CDN) настроить CORS в хранилище

Частые проблемы и решения

  1. Preflight-запросы (Предварительные запросы): Для сложных запросов (PUT, DELETE, с кастомными заголовками) браузер сначала отправляет OPTIONS-запрос
  2. Куки и авторизация: Для работы с credentials нужно: 
    fetch(url, {
  credentials: 'include'
});
    И на сервере: 
    res.header('Access-Control-Allow-Credentials', 'true');

Резюмируем

оптимальный подход — правильная настройка сервера. Для разработки можно использовать прокси Create React App, но production-решение требует корректных CORS-заголовков на сервере.

Вопросы

Собеседования