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

Зачем нужен CORS - CORS нужен, когда frontend и backend находятся на разных origin: например, app.example.com обращается к api.example.com, или frontend работает на localhost:3000, а API — на другом домене/порту. Без корректного CORS браузер получит ответ от сервера, но не даст JavaScript прочитать его.

Пример сценария 1. Браузер сначала шлёт OPTIONS 2. В preflight идут Origin, Access-Control-Request-Method, а при необходимости и Access-Control-Request-Headers. 3. Сервер отвечает Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers. 4. Если ответ подходит, браузер отправляет основной запрос. ⠀ ⠀ ⠀ Основные CORS-заголовки

- Request headers (что отправляет браузер) ⠀⠀⠀- Origin ⠀⠀⠀⠀⠀⠀- Показывает, с какого домена ( <протокол> “://”<имя_хоста>": <порт>) был инициирован запрос пришёл запрос. Это главный входной сигнал для CORS-логики на сервере

⠀⠀⠀- Access-Control-Request-Method ⠀⠀⠀⠀⠀⠀- Браузер сообщает, какой HTTP-метод он хочет использовать в основном запросе

⠀⠀⠀- Access-Control-Request-Headers ⠀⠀⠀⠀⠀⠀- Браузер перечисляет, какие нестандартные заголовки он хочет отправить в основном запросе. ⠀ ⠀ - Response headers (что отвечает сервер) ⠀⠀⠀- Access-Control-Allow-Origin ⠀⠀⠀⠀⠀⠀- Он указывает, какому origin разрешено читать ответ. Типовые варианты ⠀⠀⠀⠀⠀⠀- * — разрешить всем ⠀⠀⠀⠀⠀⠀- конкретный origin, например https://app.example.com — разрешить только ему. ⠀⠀⠀⠀⠀⠀- https://*.example.com — разрешает всем субдоменам example.com

⠀⠀⠀- Access-Control-Allow-Credentials ⠀⠀⠀⠀⠀⠀- Показывает, разрешает ли сервер кросс-origin запросы с credentials cookie, TLS client cert, auth headers.

⠀⠀⠀- Access-Control-Allow-Methods ⠀⠀⠀⠀⠀⠀- Показывает, какие HTTP-методы разрешены для кросс-origin обращения к ресурсу. Например: GET, POST, PUT.

⠀⠀⠀- Access-Control-Allow-Headers ⠀⠀⠀⠀⠀⠀- По умолчанию браузер даёт JavaScript доступ только к ограниченному набору “безопасных” response headers. Этот заголовок явно указывает, какие дополнительные response headers можно читать из JS. Примеры что может укзаываться: ⠀⠀⠀⠀⠀⠀- Authorization, Content-Type, X-Requested-With

⠀⠀⠀- Access-Control-Max-Age ⠀⠀⠀⠀⠀⠀- Используется для кэша. Указывает, как долго браузер может не повторять preflight для такого же типа запроса. ⠀ ⠀ #Web #CORS #IT #HTTP-headers #WebSecurity #Backend #API