Что такое CORS и как он влияет на запросы из браузера?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

CORS (Cross-Origin Resource Sharing) — это политика безопасности, реализованная в веб-браузерах, которая ограничивает веб-приложения в доступе к ресурсам, находящимся на другом домене, отличном от того, с которого загружена веб-страница. Это важно для защиты данных пользователя и предотвращения атак, таких как XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery).

Зачем нужен CORS?

Когда веб-страница загружается в браузере, она может попытаться получить доступ к ресурсам, таким как API, изображения или шрифты, которые находятся на другом домене. Без ограничений это может привести к утечке данных или выполнению нежелательных действий от имени пользователя. CORS позволяет серверу контролировать, какие домены могут делать такие запросы, и какие методы HTTP могут использоваться.

Как работает CORS?

Когда браузер делает запрос к ресурсу на другом домене, он автоматически добавляет заголовок Origin, который указывает домен, с которого был сделан запрос. Сервер, получив запрос, проверяет этот заголовок и решает, разрешить или отклонить запрос, основываясь на своих настройках.

Если сервер разрешает запрос, он отправляет ответ с заголовком Access-Control-Allow-Origin, который указывает, какие домены могут получить доступ к ресурсу. Если заголовок отсутствует или не соответствует домену, с которого был сделан запрос, браузер блокирует доступ к ответу.

Пример работы CORS

Рассмотрим пример, где веб-приложение на домене example.com делает запрос к API на домене api.example.com.

Запрос из браузера:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

• fetch('https://api.example.com/data'): Браузер делает запрос к API на другом домене.
• then(response => response.json()): Если запрос успешен, ответ преобразуется в JSON.
• catch(error => console.error('Error:', error)): Обработка ошибок, если запрос не удался.

Ответ сервера:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Content-Type: application/json
​
{
  "key": "value"
}

• Access-Control-Allow-Origin: https://example.com: Сервер разрешает доступ только для домена example.com.
• Content-Type: application/json: Указывает, что ответ в формате JSON.

Если бы Access-Control-Allow-Origin не содержал https://example.com, браузер заблокировал бы доступ к ответу, даже если запрос был успешным.

Применение CORS

CORS широко используется в веб-разработке для обеспечения безопасности при взаимодействии с API и другими ресурсами. Он позволяет разработчикам контролировать доступ к ресурсам и защищать данные пользователей от несанкционированного доступа. Настройка CORS на сервере — важная часть разработки безопасных веб-приложений.