Как браузер получает информацию о CORS?

Как браузер получает информацию о CORS

CORS (Cross-Origin Resource Sharing) - это механизм безопасности браузера. Давай разберёмся, как браузер проверяет разрешения.

Что такое Origin

Origin - это комбинация трёх частей:

• Protocol (http или https)
• Domain (example.com)
• Port (3000, 8080 и т.д.)

http://example.com:3000  <- это один origin
https://example.com:3000 <- это другой origin (даже protocol отличается!)
http://api.example.com   <- это другой origin (subdomain отличается)

Если origins совпадают полностью - это same-origin request. Запрос к другому origin - это cross-origin request, и здесь вступает в силу CORS.

Процесс CORS проверки

1. Simple Request (простой запрос)

Для простых GET/POST запросов браузер:

// Код в браузере (origin: http://localhost:3000)
fetch('https://api.example.com/users');

// Браузер СРАЗУ отправляет запрос с заголовком:
// GET /users HTTP/1.1
// Origin: http://localhost:3000
// Host: api.example.com

Сервер отвечает с заголовками:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Content-Type: application/json

{ "users": [...] }

Браузер проверяет заголовок Access-Control-Allow-Origin:

• Если * - разрешает для всех origins
• Если конкретный origin - проверяет совпадение
• Если заголовок отсутствует - блокирует ответ

2. Preflight Request (предварительный запрос)

Для сложных запросов (с кастомными заголовками, PUT/DELETE и т.д.) браузер СНАЧАЛА отправляет OPTIONS запрос:

// Код в браузере
fetch('https://api.example.com/posts/1', {
  method: 'DELETE',
  headers: {
    'Authorization': 'Bearer token123'
  }
});

// Браузер АВТОМАТИЧЕСКИ отправляет:
// OPTIONS /posts/1 HTTP/1.1
// Origin: http://localhost:3000
// Access-Control-Request-Method: DELETE
// Access-Control-Request-Headers: authorization
// Host: api.example.com

Сервер отвечает разрешением:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS
Access-Control-Allow-Headers: authorization, content-type
Access-Control-Max-Age: 86400

Ключевые заголовки:

• Access-Control-Allow-Origin - какие origins разрешены
• Access-Control-Allow-Methods - какие HTTP методы разрешены
• Access-Control-Allow-Headers - какие заголовки разрешены
• Access-Control-Max-Age - кешировать результат на N секунд

Только ЕСЛИ сервер разрешит - браузер отправляет настоящий запрос (DELETE).

Запросы с credentials (cookies)

По умолчанию cookies НЕ отправляются при cross-origin запросах. Чтобы отправить:

fetch('https://api.example.com/user', {
  method: 'GET',
  credentials: 'include'  // отправить cookies
});

Сервер ДОЛЖЕН ответить:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000  // конкретный origin, не *

Импортно: если credentials: 'include', то origin ДОЛЖЕН быть конкретный, а не *.

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

1. "No Access-Control-Allow-Origin header"

// Проблема: сервер не отправляет нужные заголовки
// Решение: настроить CORS на сервере

2. "CORS policy blocked by browser"

// Это НЕ ошибка сервера, это ошибка браузера
// Сервер получит запрос, но браузер заблокирует ответ

3. Проблема с кешированием preflight

// Если Access-Control-Max-Age очень большой
// и ты изменил CORS настройки - нужно очистить кеш браузера

Вывод

Браузер получает информацию о CORS через:

1. HTTP заголовки ответа (Access-Control-Allow-*)
2. Preflight запросы для сложных запросов
3. Проверку Origin перед отправкой данных

Это встроенный механизм безопасности, и его нельзя обойти со стороны клиента. Если CORS настроен неправильно - браузер просто заблокирует ответ.