CORS (Cross-Origin Resource Sharing) нужен для того, чтобы браузеры могли безопасно выполнять запросы к ресурсам на других доменах. Это важный механизм безопасности, который помогает предотвратить несанкционированный доступ к данным.
🚩Почему это нужно?
Интернет состоит из множества доменов, и иногда приложения на одном домене хотят получать данные с другого домена. Однако браузеры по умолчанию блокируют такие запросы из соображений безопасности, чтобы предотвратить атаки типа CSRF (Cross-Site Request Forgery) и XSS (Cross-Site Scripting).
🚩Как это работает?
Когда браузер пытается сделать запрос к ресурсу на другом домене, он сначала отправляет предварительный запрос (preflight request), чтобы узнать, разрешает ли сервер такой запрос. Этот предварительный запрос использует метод OPTIONS. Если сервер разрешает доступ, он отвечает с заголовками, которые сообщают браузеру, что запрос может быть выполнен. Основные заголовки, используемые в CORS, включают:
🟠Access-Control-Allow-Origin: указывает, каким доменам разрешен доступ к ресурсу.
🟠Access-Control-Allow-Methods: указывает, какие методы HTTP разрешены при доступе к ресурсу.
🟠Access-Control-Allow-Headers: указывает, какие заголовки могут быть использованы при выполнении запроса.
🚩Пример
🟠Если ваше фронтенд-приложение находится на домене frontend.com, а API, к которому оно хочет получить доступ, находится на api.backend.com. Когда фронтенд отправляет запрос к API, браузер отправляет предварительный запрос:
OPTIONS /data HTTP/1.1
Host: api.backend.com
Origin: http://frontend.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type
🟠Если сервер api.backend.com разрешает доступ, он отвечает следующим образом: После этого браузер отправляет основной запрос, и API отвечает с данными.
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://frontend.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Ставь 👍 и забирай 📚 Базу знаний