В этой лаборатории кода вы увидите, как работает тот же источник при извлечении ресурсов.
Настройка: получение страницы из того же источника.
Демо-версия размещена по адресу https://same-origin-policy-fetch.glitch.me . Эта простая веб-страница использует fetch для загрузки ресурса из https://same-origin-policy-fetch.glitch.me/fetch.html . Поскольку index.html и fetch.html имеют один и тот же источник, вы должны увидеть 200 , отображаемые при предварительном просмотре в реальном времени.
1. Получить страницу из другого источника
Попробуйте изменить URL-адрес получения на https://www.google.com . Что вы видите в предварительном просмотре?
Браузер должен был заблокировать запрос на получение, поскольку вы запросили ресурс из другого источника. Это означает, что злоумышленник не может читать ресурсы перекрестного происхождения, даже если он получил контроль над браузером пользователя.
2. Получите ресурс из разных источников.
Попробуйте изменить URL-адрес получения на https://api.thecatapi.com/v1/images/search . Что вы видите в предварительном просмотре?
URL-адрес получения имеет другое происхождение, но вы должны увидеть код состояния 200. Почему? Современные веб-приложения часто запрашивают ресурсы из разных источников для загрузки сторонних скриптов или запроса конечной точки API. Чтобы учесть эти варианты использования, существует механизм CORS (совместное использование ресурсов из разных источников), который сообщает браузеру, что загрузка ресурса из разных источников разрешена. Дополнительную информацию о CORS см. в разделе Безопасное совместное использование ресурсов из разных источников .