Статья также доступна на украинском (перейти к просмотру).

Оглавление

• Условия
• Решение
• Что такое Cors перекрестный запрос?
• Простые запросы
• Предварительные запросы
• Запросы с учетными данными
• Обязательное примечание к Internet Explorer
• Тестирование

XMLHttpRequest — это API, используемое JS-скриптами для отправки запросов на сервер. Часто используется для создания интерактивных страниц с загрузкой данных на лету без перезагрузки страницы. Использование такого API очень популярно, но в целях безопасности по умолчанию можно отправлять запросы только в рамках одного домена. Такая безопасность организована благодаря использованию CORS, который ограничивает все кросс-сайтовые HTTP-запросы.

С появлением спецификации Cross Origin Resource Sharing (CORS), которая теперь является кандидатом в рекомендации W3C, разработчики веб-приложений получили поддерживаемый браузером механизм для безопасного выполнения XmlHttpRequests в другом домене.

На момент написания этой статьи мы наконец можем сказать, что CORS поддерживается всеми основными браузерами. Первоначально он появился в Firefox 3.5, Safari 4 и Chrome 3. Internet Explorer 10 теперь имеет встроенную поддержку.

Симптомы проблемы.

В окне браузера появляется одно из следующих сообщений:

• Ошибка загрузки заголовка No Access-Control-Allow-Origin.
• Запрос между источниками заблокирован: политика «Тот же источник» запрещает чтение удаленного ресурса... Причина: заголовок CORS «Access-Control-Allow-Origin» отсутствует.
• Не удалось загрузить ответ на предварительный запрос не прошел проверку управления доступом: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin.

Одним из ключевых слов, которое обычно упоминается в сообщениях, является Access-Control-Allow-Origin.

Условия

Веб-приложение на основе браузера пытается выполнить вызов «независимо от источника», чтобы получить «общий ресурс» от внешней веб-службы. Это называется запросом CORS (Cross-Origin-Resource-Sharing).

Существует стандарт CORS на основе браузера, который управляет такими вызовами из разных источников. Если определенные условия не выполняются, возникают ошибки, указанные выше.

Решение

Это не обязательно ошибка, так как это может быть вариант использования, который веб-приложение пользователя и внешняя удаленная служба намеренно запрещают.

Когда один источник (www.ursprung1.com) запрашивает другой источник (www.ursprung2.com), это называется запросом между источниками. Чтобы этот запрос работал, должны быть выполнены определенные условия. Вызванная внешняя служба (www.origin2.com) должна вернуть в своем ответе HTTP-заголовок Access-Control-Allow-Origin.

Если внешняя служба не вернет этот заголовок, соответствие браузера спецификации CORS остановит запрос и вернет одну из указанных выше ошибок.

Что такое Cors перекрестный запрос?

Если скрипт на вашей странице запускается из домена mydomain.com и хотел бы запросить ресурс через XmlHttpRequest или XDomainRequest из домена otherdomain.com, это запрос из другого источника. Исторически сложилось так, что из соображений безопасности эти типы запросов были запрещены браузерами.

Простые запросы

Для простых межсайтовых запросов (то есть GET и POST, которые не устанавливают настраиваемые заголовки, а тело запроса представляет собой обычный текст или данные формы) браузер просто включает дополнительные заголовки Origin и Referrer, указывающие запрашивающий домен.

Обратите внимание, что браузер будет включать заголовок Origin только в том случае, если запрос является перекрестным. Ведь основная причина - отсутствует заголовок - cors access control allow origin.

Когда браузер увидит, что значение Access-Control-Allow-Origin соответствует домену страницы, он разрешит обработку ответа. Сервер может установить значение «*» в этом заголовке, чтобы указать, что это общедоступный ресурс, который допускает любое происхождение.

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

Предварительный запрос использует метод запроса OPTIONS для проверки того, что сервер поддерживает CORS host и поддерживает тип запроса, который клиент хотел бы отправить.

Запросы с учетными данными

Браузер не будет отправлять файлы cookie или данные проверки подлинности HTTP в междоменном запросе XmlHttpRequest. Клиентское приложение должно указать, что они должны быть отправлены, задав свойство withCredentials запроса XmlHttpRequest или XDomainRequest. По умолчанию это значение равно false и не установлено.

Обратите внимание, что для этого необходимо использовать jQuery 1.5.1+, поскольку предыдущие версии jQuery не передавали свойство withCredentials в собственный XmlHttpRequest.

Обязательное примечание к Internet Explorer

Internet Explorer 8 и 9 имеют ограниченную поддержку CORS. А именно:

• Поддерживаются только GET и POST с типом содержимого обычный/текст.
• Он не поддерживает предварительную проверку
• К запросу нельзя добавлять настраиваемые заголовки.
• Запросы учетных данных не поддерживаются
• Запросы должны быть направлены на ту же схему, что и страница хостинга.

Internet Explorer 10 теперь имеет встроенную поддержку CORS. Однако на момент написания этой статьи IE 10 поддерживает только запросы с учетными данными между доменами, которые имеют совпадающее доменное имя второго уровня, например, a.mydomain.com запрашивает b.mydomain.com. Пока невозможно отправлять учетные данные между mydomain.com и otherdomain.com.

Тестирование

Отличный ресурс для тестирования запросов CORS можно найти по адресу test.cors.org. Этот тестовый сайт позволяет:

• Отправлять запросы CORS на удаленный сервер для проверки его возможностей.
• Отправка запросов CORS на тестовый сервер для изучения функций CORS.

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

Каков начальный URL вызова (т. е. источник)? Иногда это можно найти в самом сообщении об ошибке.

Какой URL извлекается из внешней службы? Иногда это можно найти в сообщении об ошибке консоли.

Что извлекается и почему? Это PNG-файл? Скрипт, CSS или файл шрифта? Что именно извлекается и для чего используется? Это может пролить свет на вариант использования и показать, почему актив так важен в этом удаленном месте.

Требует ли этот внешний ресурс аутентификацию? Если требуется переадресация, заголовок ответа Access-Control-Allow-Origin может не возвращаться, и вызов завершится ошибкой. Скопируйте URL-адрес ресурса прямо в новую вкладку инкогнито в браузере. Это может быть хорошей проверкой того, можно ли получить к нему доступ при общих обстоятельствах, но это не гарантирует, что он будет работать в коде веб-приложения.

Видите ли вы вызов метода HTTP OPTIONS на вкладке «Сеть» браузера? Если настраиваемые заголовки запроса, проверка подлинности или другие условия присутствуют в запросе между источниками, браузер выполняет дополнительный HTTP-вызов. Это также известно как «предполетный вызов». Это явно не указано в коде веб-приложения. Браузер в фоновом режиме создает его и делает частью спецификации CORS.

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

Запишите, когда вы видите вызов OPTIONS. Также обратите внимание, происходит ли вызов с переадресацией (состояние 302) непосредственно перед вызовом OPTIONS.

Если при вызове OPTIONS происходит переадресация, вызов OPTIONS, скорее всего, завершится ошибкой. Это означает, что вызов ресурса также завершится ошибкой CORS.

Каков вариант использования для предоставления внешних ресурсов? Выясните, почему этот внешний ресурс извлекается в первую очередь. Это может быть важно для решений или изменений.

Генерация HAR-файла. Если вы можете получить моментальный снимок неудачного вызова и событий до и после него, вы сможете лучше устранить проблему и избежать необходимости ее воспроизведения пользователем. Заголовки в запросах и ответах могут быть проверены вместе с OPTIONS вызовами и переадресациями!

Подписывайтесь на наш телеграм-канал https://t.me/freehostua, чтобы быть в курсе новых полезных материалов.

Смотрите наш канал Youtube на https://www.youtube.com/freehostua.

Мы в чем-то ошиблись, или что-то пропустили?

Напишите об этом в комментариях на сайте и в телеграм-канале. Мы с удовольствием ответим и обсудим Ваши замечания и предложения.

Дата: 01.02.2023 Автор: Евгений

Голосование 1 2 3 4 5