CORS

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

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

1. Запрос с другого источника:
   • Когда веб-страница пытается сделать запрос (например, через fetch или XMLHttpRequest) к ресурсу на другом домене, браузер автоматически добавляет в запрос заголовок Origin. Этот заголовок содержит домен, с которого был отправлен запрос.
2. Ответ сервера:
   • Сервер, получив запрос, может разрешить или запретить доступ к ресурсу. Если сервер поддерживает CORS, он добавляет в ответ заголовок Access-Control-Allow-Origin, указывая, какие домены могут получить доступ к ресурсу.
   • Например, если сервер разрешает доступ всем доменам, он может вернуть:
     Access-Control-Allow-Origin: *
     Если доступ разрешен только конкретному домену, то:
     Access-Control-Allow-Origin: https://example.com
3. Проверка браузером:
   • Браузер проверяет заголовок Access-Control-Allow-Origin в ответе сервера. Если значение заголовка совпадает с доменом, с которого был отправлен запрос (или это *), браузер разрешает доступ к данным. В противном случае запрос блокируется, и на странице возникает ошибка CORS.
4. Предварительные запросы (Preflight):
   • Для некоторых типов запросов (например, с использованием методов, отличных от GET/POST, или с кастомными заголовками), браузер сначала отправляет предварительный запрос (OPTIONS), чтобы проверить, поддерживает ли сервер CORS и разрешает ли он такие запросы.
   • Сервер должен ответить на этот запрос, указав разрешенные методы, заголовки и другие параметры.

Пример

• Веб-страница на https://example.com делает запрос к API на https://api.example.com.
• Браузер отправляет запрос с заголовком: Origin: https://example.com
• Сервер отвечает: Access-Control-Allow-Origin: https://example.com
• Браузер проверяет заголовок и разрешает доступ к данным.

Основные заголовки CORS:

• Origin: Указывает домен, с которого отправлен запрос.
• Access-Control-Allow-Origin: Указывает, какие домены могут получить доступ к ресурсу.
• Access-Control-Allow-Methods: Указывает разрешенные HTTP-методы (например, GET, POST).
• Access-Control-Allow-Headers: Указывает разрешенные заголовки в запросе.
• Access-Control-Allow-Credentials: Указывает, можно ли отправлять куки или другие учетные данные.

Важно:

CORS работает только в браузерах. Серверные приложения (например, на Node.js или Python) не ограничены политикой CORS. Если сервер не настроен для поддержки CORS, браузер заблокирует запрос, даже если сервер возвращает данные.

🚀 Источник: DeepSeek