Я давно не писал эссе, и всегда чувствую, что у меня нет времени, но на самом деле время... Хватит чепухи, несколько дней назад появилось новое требование: фронтенд-страница должна была асинхронно вызывать бэкенд-веб-сервис для возврата информации. Есть много способов реализации, в этом примере используется jQuery+Ajax, после завершения всё можно отладить локально, но после развертывания на сервере возникает проблема, и фоновый сервисный вызов не отвечает, что происходит? Код почти не изменился, единственное, что изменилось — это URL-адрес в методе ajax от jQuery. Может быть, проблема в том, что после проверки и отладки выясняется, что ошибочна гомологичная политика; мы знаем, что Javascrip{filtering}t или jQuery — это динамическая техника скриптов, часто используемая в веб-фронтенд-разработке. В Javascrip{filtering}t существует важное ограничение безопасности, известное как «Политика одного происхождения». Эта политика накладывает важное ограничение на содержание страницы, к которому может получить доступ код Javascrip{filter}t, то есть Javascrip{filtering}t может получать доступ только к содержимому под тем же доменным именем, что и документ или скрипт, который его содержат. Скрипты под разными доменами не могут иметь доступ друг к другу, даже поддомены. Что касается омологичной стратегии, читатели могут объяснить её более подробно на Baidu, что здесь не повторится.
Но иногда неизбежно проводить междоменные операции, и «гомологичная политика» — это ограничение, что нам делать? Давайте рассмотрим, как реализуется JSONP кросс-домен, и обсудим принцип кросс-доменной работы JSONP.
Здесь упоминается JSONP, затем кто-то спросил, в чём разница между ним и JSON, давайте посмотрим, в Baidu Encyclopedia есть следующее объяснение:
JSON (Javascrip{filtering}t Object Notation) — это лёгкий формат обмена данными. Он основан на подмножестве Javascrip{filter}t (Стандарт ECMA-262, 3-е издание — декабрь 1999). JSON использует полностью независимый от языка формат текста, но также использует привычки, схожие с семейством C (включая C, C++, C#, Java, Javascrip, Perl, Python и др.). Эти особенности делают JSON идеальным языком для обмена данными. Легко читается и пишет человеком, но также легко разбирается и генерируется машиной (быстрая сетевая передача).
JSONP (JSON с заполнением) — это «шаблон использования» JSON, который может использоваться для решения проблемы кросс-доменного доступа к данным в основных браузерах. Из-за политики одного источника страницы, обычно находящиеся на server1.example.com, не могут общаться с серверами, не входящими в server1.example.com, за исключением элемента <scrip{filter}t> в HTML. Используя эту открытую стратегию элемента <scrip{filter}t>, веб-страницы могут динамически генерировать данные JSON из других источников, и этот шаблон использования называется JSONP. Данные, собранные с помощью JSONP, не являются JSON, а произвольным Javascrip{filter}t, который выполняется с помощью транслятора Javascrip{filter}t, а не парсером JSON.
На данном этапе следует понимать, что JSON — это лёгкий формат обмена данными, подобный xml, который используется для описания данных между данными. JSONP — это способ использования данных JSON, и вместо возврата JSON-объекта это JavaScript{filtering}t, содержащий JSON-объект.
Итак, как работает JSONP? Мы знаем, что из-за ограничений политики одного источника XmlHttpRequest допускает запросы на ресурсы только от текущего источника (доменное имя, протокол, порт). Кроссдоменные запросы невозможны по соображениям безопасности, но мы обнаружили, что при вызове js-файлов на веб-страницах, они не подвержены влиянию междоменного взаимодействия, а теги с атрибутом "src" имеют междоменные возможности, такие как <scrip{filter}t>, <img>, ,<iframe>Если вы хотите сделать кросс-доменный запрос, сделайте кросс-доменный запрос, используя тег scrip{filter}t в html, и верните код scrip{filtering}t, который будет выполнен в ответе, в котором можно напрямую использовать JSON для передачи объекта javascrip{filter}t. То есть генерировать данные JSON на кроссдоменном сервере, а затем обернуть их обратно в скрипт scrip{filtering}t, который преодолевает ограничения политики одного происхождения и решает проблему междоменного доступа.
Давайте посмотрим, как этого добиться:
Код фронтенда:
|