Когда возникают проблемы с CORS?

Разбор проблем CORS и их решение

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

Основные сценарии возникновения проблем CORS

Типичные ситуации, когда вы сталкиваетесь с ошибками CORS:

1. Разные домены — фронтенд на frontend.com пытается получить данные с API на api.backend.com
2. Разные поддомены — app.site.com запрашивает данные с api.site.com
3. Разные порты — локальный сервер на localhost:3000 обращается к бэкенду на localhost:8080
4. Разные протоколы — HTTPS сайт пытается получить данные с HTTP API
5. Запросы между разными источниками в сложных архитектурах — микросервисы, CDN, сторонние API

Конкретные ошибки CORS в консоли браузера

Браузер блокирует запрос и выводит ошибки вида:

// Типичная ошибка в консоли
Access to fetch at 'https://api.example.com/data' from origin 'https://frontend.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.

Ключевые HTTP-заголовки, участвующие в CORS:

Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

Почему именно возникают проблемы?

1. Отсутствие правильных заголовков на сервере — бэкенд не отправляет Access-Control-Allow-Origin
2. Неправильно настроенные заголовки — допустимый источник указан не полностью или с ошибкой
3. Сложные запросы (preflight) — для методов кроме GET/POST/HEAD или с кастомными заголовками требуется предварительный OPTIONS-запрос
4. Учетные данные (credentials) — если запрос включает cookies или авторизацию, нужен Access-Control-Allow-Credentials: true

Пример правильной настройки сервера (Node.js/Express)

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

const app = express();

// Базовая настройка CORS
app.use(cors({
  origin: 'https://frontend.com', // Разрешенный источник
  credentials: true, // Разрешить cookies
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// Или более гибкая настройка
app.use((req, res, next) => {
  const allowedOrigins = ['https://frontend.com', 'https://admin.frontend.com'];
  const origin = req.headers.origin;
  
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Max-Age', '86400');
  
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  
  next();
});

Решения и обходные пути

На стороне сервера (рекомендуемый подход):

• Настроить корректные CORS-заголовки
• Использовать middleware типа cors для Node.js
• Для Nginx/Apache настроить проксирование

На стороне клиента (временные решения):

• Proxy-сервер — направлять запросы через свой сервер
• JSONP — устаревший метод только для GET-запросов
• Отключение CORS в браузере — ТОЛЬКО для разработки!

В разработке:

• Использовать плагины для браузера (CORS Unblock)
• Настроить dev-сервер (webpack-dev-server) для проксирования

Best Practices

1. Явно указывайте разрешенные источники вместо звездочки (*)
2. Не используйте credentials: true с origin: "*" — это запрещено спецификацией
3. Настраивайте CORS ближе к продакшену — локально можно использовать прокси
4. Логируйте CORS-ошибки на сервере для диагностики
5. Используйте preflight-кеширование через Access-Control-Max-Age

CORS — это фича безопасности, а не баг. Проблемы возникают при неправильной конфигурации сервера или архитектурных ошибках, когда нарушается принцип Same-Origin Policy. Правильная настройка требует понимания и взаимодействия фронтенд- и бэкенд-разработчиков.