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

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

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

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

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

Зачем нужен CORS

Браузеры по умолчанию ограничивают запросы между разными источниками (доменами) из соображений безопасности. Это называется политикой одного источника (Same-Origin Policy). CORS позволяет обойти это ограничение, предоставляя возможность серверу указать, какие домены могут обращаться к его ресурсам.

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

Когда веб-страница делает запрос к ресурсу на другом домене, браузер автоматически добавляет заголовок Origin в запрос. Сервер, получив этот запрос, проверяет, разрешен ли доступ для указанного источника. Если доступ разрешен, сервер отправляет ответ с заголовками CORS, которые указывают браузеру, что запрос может быть выполнен.

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

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

Запрос от клиента

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

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

Ответ от сервера

Сервер на http://api.example.com должен ответить с заголовками CORS:

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

• Access-Control-Allow-Origin: http://example.com: Разрешает доступ только с http://example.com.
• Access-Control-Allow-Methods: GET, POST: Указывает, какие HTTP-методы разрешены.
• Access-Control-Allow-Headers: Content-Type: Указывает, какие заголовки могут быть использованы в запросе.

Предварительные запросы (Preflight Requests)

Для некоторых запросов, таких как PUT, DELETE или запросов с нестандартными заголовками, браузер сначала отправляет предварительный запрос OPTIONS для проверки разрешений.

Пример предварительного запроса

Браузер отправляет запрос OPTIONS:

OPTIONS /data HTTP/1.1
Host: api.example.com
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Сервер отвечает:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

• OPTIONS /data HTTP/1.1: Запрос для проверки разрешений.
• Access-Control-Request-Method: PUT: Указывает метод, который будет использован в основном запросе.
• Access-Control-Request-Headers: Content-Type: Указывает заголовки, которые будут использованы.

Заключение

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