Зачем нужен CORS?

Зачем нужен CORS?

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

Проблема Same-Origin Policy

Bраузеры по умолчанию запрещают JavaScript-коду из одного источника обращаться к ресурсам другого источника. Это защита от XSS-атак и кражи данных:

fetch('https://api.other-domain.com/data')
  .then(res => res.json())
  .catch(err => console.error('CORS Error'));

Как работает CORS

Preflight запрос:

Перед отправкой POST, PUT, DELETE браузер отправляет OPTIONS запрос:

// OPTIONS /api/data HTTP/1.1
// Origin: https://example.com
// Access-Control-Request-Method: POST

Ответ сервера:

// HTTP/1.1 200 OK
// Access-Control-Allow-Origin: https://example.com
// Access-Control-Allow-Methods: GET, POST, PUT, DELETE
// Access-Control-Allow-Headers: Content-Type, Authorization

Основные заголовки CORS

• Access-Control-Allow-Origin — какие источники могут получать доступ
• Access-Control-Allow-Methods — разрешённые HTTP-методы
• Access-Control-Allow-Headers — разрешённые заголовки запроса
• Access-Control-Allow-Credentials — разрешить ли отправку cookies
• Access-Control-Max-Age — кеширование preflight на N секунд

Примеры использования

1. Простой GET-запрос (без preflight):

fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => console.log(data));

2. POST с JSON (требует preflight):

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
});

3. С аутентификацией (cookies):

fetch('https://api.example.com/me', {
  method: 'GET',
  credentials: 'include'
});

Конфигурация на серверах

Express.js:

const cors = require('cors');

app.use(cors({
  origin: 'https://example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400
}));

FastAPI (Python):

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
  CORSMiddleware,
  allow_origins=['https://example.com'],
  allow_methods=['*'],
  allow_headers=['*'],
  allow_credentials=True,
  max_age=86400
)

Типичные CORS ошибки

Ошибка: Access to XMLHttpRequest has been blocked by CORS policy: No Access-Control-Allow-Origin header

Это означает, что сервер не добавил необходимый заголовок.

Best Practices

• Не используй wildcard (*) для публичных API — всегда указывай конкретные домены
• Используй credentials осторожно — требует конкретного Access-Control-Allow-Origin
• Кешируй preflight через Access-Control-Max-Age для производительности
• Минимизируй разрешённые методы и заголовки
• На production убедись, что CORS настроен правильно

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