Что такое CORS и зачем он нужен на собеседовании?

Что представляет собой CORS?

• механизм защиты, встроенный в веб-браузеры
• Cross-Origin Resource Sharing — технология обмена ресурсами между различными доменами
• контролирует доступ к ресурсам, если запрос поступает с другого источника (домена, протокола или порта)
• реализуется с помощью HTTP-заголовков (например, Access-Control-Allow-Origin)
• защищает от межсайтовых атак, сохраняя возможность разрешённого обмена данными
• сервер явно определяет список разрешённых источников
• особенно важен для современных frontend-приложений, использующих API и микросервисы

Развёрнутый ответ

Основная формулировка

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

Основные положения

• Origin включает протокол, имя хоста и порт, например https://example.com:443. По умолчанию браузер запрещает запросы между разными origin, поскольку это помогает защищаться от атак вроде CSRF.
• При использовании CORS сервер возвращает заголовки (например, Access-Control-Allow-Origin), тем самым разрешая либо запрещая клиенту доступ с конкретного origin.
• Запросы делятся на несколько категорий: простые (например, GET и POST с ограниченным набором заголовков) и предварительные (preflight). Во втором случае браузер сначала выполняет OPTIONS-запрос, чтобы выяснить, допускается ли основной запрос с нестандартными заголовками или методами, такими как PUT и DELETE.
• В параметрах CORS задаются разрешённые методы и заголовки, срок кэширования результата preflight, а также возможность отправки cookie (Access-Control-Allow-Credentials).

Пример из практики

CORS регулярно применяется при создании SPA на React, Vue или Angular, если frontend и backend работают на разных доменах либо портах. Так, React-приложение, запущенное на localhost:3000, может отправлять AJAX-запросы к API, расположенному на api.example.com. При неверной конфигурации CORS браузер заблокирует такие обращения, что особенно важно учитывать в распределённых приложениях и микросервисной архитектуре.