Междоменное
Что такое кросс-домен
Браузер в целях обеспечения безопасности, повышение гомологичного предела, на самом деле, запрос отправляется, сервер соответствующим образом, но браузер угнал. Так называемые гомологичные относится к области, протокол, порт такие же, браузер будет чувствовать себя отвечать требованиям.
Как только есть другой источник, браузер запустит механизм безопасности.
Междоменное решение к чему?
Там должно быть много, я ввел JSONP, CORS, window.postMessage лучшего понимания этих трех
-
JSONP
Принцип:
<script>
метка не ограничение междоменного, пс: все атрибуты SRC не гомологичны ограничения, такие как<img>
JSONP Минусы: поддерживает только GET запросов, не поддерживают другие типы запросов; преимущества: хорошую совместимость, и могут работать в старом браузере.
-
СЕРДЦА
CORS является стандартом W3C, выступает за "Кросс-Origin Resource Sharing" (совместное использование ресурсов Перекрестная происхождения). Это позволяет браузеру переправиться исходный сервер, выпуск XMLHttpRequest запроса.
Запрос делятся на два типа: простой и сложные запросы запроса.
Как различать простые и сложные запросы запросить его? Она не отвечает следующим условиям сложных запросов.
- Метод запроса является одним из трех способов:
ГОЛОВА
ПОЛУЧИТЬ
СООБЩЕНИЕ
- информация заголовка HTTP не превышает следующие поля:
принимать
Accept-Language
Content-Language
Last-Event-ID
Content-Type: три значения ограниченное применение / х-WWW-форм-urlencoded, многокомпонентные / форм-данных, текст / обычный
Точки знаний:
-
Лицо сложных запросов, браузер будет первым отправить в первый раз в предполетной запросе, предполетный запрос с использованием метода OPTIONS, нести
Origin, Access-Control-Request-Method, Access-Control-Request-Headers
, - Сервер отказывается сделать это, возвращает ответ HTTP нормально, но нет
Access-Control-Allow-Origin
поля, сервер согласен, ответ возвращается в дополнениеAccess-Control-Allow-Origin
, будет
Access-Control-Allow-Methods,
Access-Control-Allow-Headers,
Access-Control-Allow-Credentials,//它的值是一个布尔值,表示是否允许发送Cookie。默认false,不发送
Access-Control-Max-Age // 该字段可选,用来指定本次预检请求的有效期,单位为秒, 在此期间,不用发出另一条预检请求。
- После того, как сервер через «предполетный» запрос, после того, как каждый раз, когда браузер запрашивает нормальную CO, как это связанно с простым запросом, будет поле заголовка Origin. В ответ на сервер, вы также будете иметь поле заголовка Access-Control-Allow-Origin.
-
HTML5 window.postMessage API
window.postMessage является безопасным, на основе событий обмена сообщениями API
- Отправить сообщение
Окно WINA хочет отправить, вызовите метод PostMessage, вы можете отправлять сообщения, которые WINA также может находиться в окне документа фрейме:
var iframe = document.getElementById('my-iframe');
var win = iframe.documentWindow;
PostMessage Синтаксис: otherWindow.postMessage(message, targetOrigin, [transfer]);
Для каштаны:win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');
- Прием сообщений
Сообщение окно Источник по PostMessage сделал до того, как заказ будет получен, только нужно зарегистрироваться в событиях сообщений целевого окна и привязки функции слушателя событий, вы можете получить параметры функции сообщения.
Примечание: PostMessage может только передавать информацию строки.
window.onload = function() {
var text = document.getElementById('txt'); function receiveMsg(e) { // e 有三个属性:data, origin, source console.log("Got a message!"); console.log("\nMessage: " + e.data); console.log("\nOrigin: " + e.origin); // console.log("Source: " + e.source); text.innerHTML = "Got a message!<br>" + "Message: " + e.data + "<br>Origin: " + e.origin; } if (window.addEventListener) { //为窗口注册message事件,并绑定监听函数 window.addEventListener('message', receiveMsg, false); }else { window.attachEvent('message', receiveMsg); } };