Frontend | Вопросы собесов

🤔 Для чего нужен cors?



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

Ставь 👍 и забирай 📚 Базу знаний