Можешь объяснить, как работает Cross-Origin Resource Sharing (CORS) в JavaScript, включая роль заголовков сервера и preflight запросов?

Что такое CORS?

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

Как работают заголовки сервера

Сервер должен явно разрешить запросы с других origin'ов, включив специальные HTTP-заголовки ответа:

• Access-Control-Allow-Origin — указывает, какие origin'ы разрешены (например, * или конкретный домен)
• Access-Control-Allow-Methods — перечисляет разрешённые HTTP-методы (GET, POST и т.д.)
• Access-Control-Allow-Headers — указывает, какие заголовки запроса разрешены

Если эти заголовки отсутствуют или некорректны, браузер блокирует ответ, даже если сервер успешно обработал запрос.

Как работают preflight-запросы

Для не-простых запросов (например, с использованием PUT, DELETE или пользовательских заголовков) браузер автоматически отправляет preflight-запрос перед основным:

Сервер должен ответить с соответствующими заголовками Access-Control-Allow-*, чтобы подтвердить, что запрос разрешён. Только после этого браузер отправит основной запрос.

Простые и не-простые запросы

• Простые запросы (GET, POST со стандартными заголовками) пропускают этап preflight
• Не-простые запросы всегда сначала проходят preflight-проверку через OPTIONS

Главный вывод

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