На переднем конце, как решить проблемы между доменами

Междоменное

Что такое кросс-домен

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

  Как только есть другой источник, браузер запустит механизм безопасности.

Междоменное решение к чему?

Там должно быть много, я ввел 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

  1. Отправить сообщение

Окно 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/');

  1. Прием сообщений

Сообщение окно Источник по 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); } };

рекомендация

отwww.cnblogs.com/haoyiwei/p/10926684.html