Что такое кросс-домен?
Концепция: Пока есть какая -то разница в протоколе, доменном имени или порте, он рассматривается как другой домен.
Кода -копия выглядит следующим образом:
URL указывает, разрешена ли связь
http://www.a.com/a.js
http://www.a.com/b.js разрешен под тем же доменным именем
http://www.a.com/lab/a.js
http://www.a.com/script/b.js Различные папки под одним и тем же доменным именем разрешены
http://www.a.com:8000/a.js
http://www.a.com/b.js одно и то же доменное имя, разные порты не допускаются
http://www.a.com/a.js
https://www.a.com/b.js одно и то же доменное имя, разные протоколы не допускают
http://www.a.com/a.js
http://70.32.92.74/b.js доменное имя и доменное имя соответствуют IP.
http://www.a.com/a.js
http://script.a.com/b.js Основной домен такой же, но субдомен не допускается
http://www.a.com/a.js
http://a.com/b.js Тот же доменное имя, разные вторичные доменные имена (так же, как и выше) не допускается (в данном случае нет доступа к файлам cookie)
http://www.cnblogs.com/a.js
http://www.a.com/b.js Различные доменные имена не допускаются
Разница между портами и протоколами может быть решена только на заднем плане.
Обмен перекрестными ресурсами (CORS)
Cros (Cros-Cross-Origin Resource Sharing) Обмен ресурсами кросс-домен определяет, как браузер и сервер должны общаться при доступе к ресурсам междомена. Основная идея, лежащая в основе Cros, состоит в том, чтобы использовать пользовательский HTTP -заголовок, чтобы позволить браузеру общаться с сервером, тем самым решая, должен ли запрос или ответ быть успешным или неудачным.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
var xhr = new xmlhttprequest ();
xhr.open ("get", "/trigkit4", true);
xhr.send ();
</script>
Вышеуказанный тригкит4 является относительным путем. Если мы хотим использовать CORS, соответствующий код AJAX может выглядеть так:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
var xhr = new xmlhttprequest ();
xhr.open ("get", "http://segmentfault.com/u/trigkit4/", true);
xhr.send ();
</script>
Разница между кодом и предыдущим заключается в том, что относительный путь заменяется абсолютным путем других доменов, то есть адрес интерфейса, к которому вы хотите получить доступ между доменами.
Поддержка на стороне сервера для COR в основном достигается путем установки контроля доступа. Если браузер обнаруживает соответствующие настройки, AJAX может получить доступ к доменам.
Чтобы решить перекрестные задачи, мы можем использовать следующие методы:
Кросс-домен через JSONP
Теперь вопрос есть? Что такое JSONP? Определение Википедии: JSONP (JSON с прокладкой) - это «режим использования» формата данных JSON, который позволяет веб -страницам запросить информацию из других доменов.
JSONP также называется Fill-IN JSON. Это новый метод для применения JSON, но это всего лишь JSON, включенный в вызовы функций, например:
Кода -копия выглядит следующим образом:
обратный вызов ({"name", "trigkit4"});
JSONP состоит из двух частей: функция обратного вызова и данные. Функция обратного вызовов - это функция, которую следует вызвать на странице при появлении ответа, и данные - это данные JSON, передаваемые в функцию обратного вызова.
В JS невозможно напрямую запросить данные в разных доменах, используя xmlhttprequest. Тем не менее, можно ввести файлы сценариев JS в разных доменах на странице, и JSONP использует эту функцию для ее достижения. Например:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
Функция DoSomhething (jsondata) {
// обработать полученные данные JSON
}
</script>
<script src = "http://example.com/data.php?callback=dosomething"> </script>
После того, как файл JS успешно загружен, будет выполнена функция, которую мы указали в параметре URL -адреса, и данные JSON, которые нам необходимы, будут переданы в качестве параметров. Следовательно, JSONP требует, чтобы страница на стороне сервера соответственно сотрудничала.
Кода -копия выглядит следующим образом:
<? Php
$ callback = $ _get ['callback']; // Получить имя функции обратного вызова
$ data = array ('a', 'b', 'c'); // Данные, которые должны быть возвращены
Echo $ обратный вызов. '('. json_encode ($ data). ')'; // output
?>
Наконец, вывод: DOSOMENTE (['A', 'B', 'C']);
Если ваша страница использует jQuery, то метод инкапсуляции может использоваться для очень удобного выполнения операций JSONP.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
$ .getJson ('http://example.com/data.php?callback=?,function (jsondata)') {
// обработать полученные данные JSON
});
</script>
JQUERY автоматически генерирует глобальную функцию для замены вопроса в Callback =?, а затем автоматически уничтожит данные после их получения. На самом деле, он играет роль временной функции агента. Метод $ .getjson автоматически определит, является ли он перекрестным доменом. Если он не является междоменом, он позвонит на обычный метод Ajax; Если он перекрестный, он вызовет функцию обратного вызова JSONP в форме асинхронной загрузки файлов JS.
Плюсы и минусы JSONP
Преимущества JSONP: это не ограничивается гомологичными политиками, такими как запрос AJAX, реализованный объектом Xmlhttprequest; Он имеет лучшую совместимость и может работать в более старых браузерах, без поддержки Xmlhttprequest или ActiveX; А после завершения запроса результат может быть возвращен с помощью вызова обратного вызова.
Недостаток JSONP заключается в том, что он поддерживает только запросы GET, а не другие типы HTTP -запросов, таких как POST; Он поддерживает только междоменные HTTP-запросы и не может решить проблему того, как сделать вызовы JavaScript между двумя страницами в разных областях.
Сравнение между Cros и JSONP
По сравнению с JSONP, CORS, несомненно, является более продвинутым, удобным и надежным.
1. JSONP может реализовать только запросы GET, в то время как CORS поддерживает все типы HTTP -запросов.
2. Используя CORS, разработчики могут использовать обычный Xmlhttprequest для инициирования запросов и получения данных, которые имеют лучшую обработку ошибок, чем JSONP.
3. JSONP в основном поддерживается старыми браузерами. Они часто не поддерживают COR, и большинство современных браузеров уже поддерживают CORS).
Поперечный подмена путем изменения документа.domain
Браузеры имеют гомологичную политику, и одним из его ограничений является то, что в первом методе мы сказали, что документы из разных источников не могут быть запрошены с помощью метода Ajax. Его второе ограничение состоит в том, что взаимодействие JS не может быть выполнено между рамками разных доменов в браузере.
Различные рамки могут получить окно -объекты, но они не могут получить соответствующие свойства и методы. Например, есть страница с адресом http://www.example.com/a.html. На этой странице есть iframe, и его SRC - http://example.com/b.html. Очевидно, что эта страница имеет другой домен из фреймворка Iframe внутри нее, поэтому мы не можем получить вещи в iframe, написав код JS на странице:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
функциональный тест () {
var iframe = document.getElementById ('ifame');
var win = document.contentwindow; // Вы можете получить объект Window в Iframe, но свойства и методы окна объекта практически недоступны
var doc = win.document; // объект документа в iframe не может быть получен здесь
var name = win.name; // атрибут имени объекта окна не может быть получен здесь
}
</script>
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </iframe>
В настоящее время Document.domain может пригодиться. Нам просто нужно установить Document.domain на обеих страницах: http://www.example.com/a.html и http://example.com/b.html на одно и то же доменное имя. Но следует отметить, что настройка документа. Домоин ограничен. Мы можем установить только документ. Домен в его собственном или более высоком родительском домене, и основной домен должен быть одинаковым.
1. Установите Document.domain на странице http://www.example.com/a.html:
Кода -копия выглядит следующим образом:
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </iframe>
<script type = "text/javascript">
document.domain = 'example.com'; // установить как основной домен
функциональный тест () {
Alert (document.getElementbyId ('iframe'). ContentWindow); // ContentWindow может получить окно -объект окна дочернего окна
}
</script>
2. Также установите Document.domain на странице http://example.com/b.html:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
document.domain = 'example.com'; // загрузить эту страницу в iframe и установить Document.domain, чтобы сделать его таким же, как Document.domain на главной странице
</script>
Метод изменения документа. Домен подходит только для взаимодействия между рамками с различными субдоменом.