Что такое CORS, какие проблемы он решает и как обычно настраивается?

Question

CORS — это механизм безопасности браузера, который контролирует, какие домены могут отправлять запросы к вашему API. Он помогает предотвратить доступ веб-страниц к чужим сервисам без разрешения. Настройка обычно включает отправку заголовков Access-Control-Allow-Origin, Allow-Methods, Allow-Headers, а также обработку preflight-запросов OPTIONS. Правильная конфигурация позволяет безопасно работать с кросс-доменными API.

YeaHub · Accepted Answer

CORS: Cross-Origin Resource SharingОпределение: CORS — механизм, позволяющий серверу контролировать доступ браузерных клиентов из других доменов.1. Проблема, которую решает CORSБраузер по умолчанию запрещает запросы с одного домена на другой (cross-origin), чтобы:предотвратить кражу данныхзапретить выполнение нежелательных запросовограничить XSS-атакиТо есть:frontend.com → api.com   (по умолчанию запрещено)
CORS — механизм, позволяющий разрешить безопасные типы таких запросов.2. Как работает CORSПри cross-origin запросе браузер может:Сделать обычный запрос (simple request)Сделать preflight-запрос методом OPTIONSPreflight-requestБраузер спрашивает сервер:OPTIONS /api/data
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Authorization
Сервер должен ответить:Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Authorization
Если сервер не отвечает нужными заголовками — браузер блокирует запрос.3. Основные CORS-заголовкиAccess-Control-Allow-OriginУказывает, какие домены разрешены.Примеры:Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-MethodsДоступные методы: GET, POST, PUT, DELETE, PATCHAccess-Control-Allow-HeadersСписок разрешённых клиентских заголовков: Authorization, Content-Type, X-Requested-WithAccess-Control-Allow-CredentialsРазрешает передавать куки и авторизационные данные.Access-Control-Allow-Credentials: true
Access-Control-Max-AgeВремя кеширования preflight ответа.4. Типичная настройка на сервереНа PHP:phpheader('Access-Control-Allow-Origin: https://frontend.com');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Authorization, Content-Type');
5. Лучшие практики настройкиНе использовать * при авторизацииЕсли нужны куки — нельзя использовать *.Разрешать только нужные доменыЛучше список доменов, а не *.Кешировать preflightЧтобы уменьшить трафик OPTIONS.Учитывать, что CORS работает только в браузереСервер-сервер запросы CORS не касаются.6. ВыводCORS — механизм безопасности браузеров, который разрешает или блокирует cross-origin запросы. Настраивается через несколько заголовков и позволяет безопасно предоставлять API фронтендам на других доменах.