同源政策：协定、域名、端口均雷同。

非同源限定：

1. cookie、localStorage、indexDB没法读取。
2. DOM没法猎取。
3. AJAX要求没法发送。

处理体式格局：

一、JSONP

道理：经由过程动态增加一个<script>元素，向服务器要求JSON数据。服务器吸收要求返回到指定签字回调函数。

eg:

function addScript(src) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javscript");
    script.src = src;
    document.body.appendChild(script);
}

window.onload = function() {
    addScript("https://segmentfault.com/data?callback=getData");
}

function getData(data) {
    console.log(data)
}

注重：
1、查询的Url中callback须要指定回调函数的名字。
2、<script>在浏览器作为代码运转，定义的getData函数会被马上挪用。
3、返回的JSON参数作为javascript对象，不是字符串，不须要举行JSON转换。
4、jquery库的 $.getJSON()也可以完成。

$.getJSON("https://segmentfault.com/data?callback=?", function(data) {
    console.log(data)
})

瑕玷：是GET体式格局猎取，不支撑 POST。

二、window.postMessage

window.postMessage 不管是不是同源都许可跨窗口通讯。 postMessage 参数一是通报内容，参数二是协定+域名+端口或许（*示意不限定域名）

页面一："https://www.segmentfault.com/page1.html"    //通报页面
<script>
    window.onload = function () {
        if (typeof window.postMessage === undefined) {
            alert("浏览器不支撑postMessage！");
        } else {
            window.open.postMessage({data: "Hello World"}, "https://www.example.com/page2.html");
        }
    }
</script>

页面二："https://www.example.com/page2.html"    //吸收页面
<script>
    window.addEventListener('message', function(e) {
        console.log(e.data);
    },false);
</script>

事宜吸收window.addEventListener(‘message’, function(){});中的message事宜对象event有三个属性：
1、event.source：发送音讯的窗口
2、event.origin: 音讯发向的网址
3、event.data: 音讯内容

<script>
    //援用父窗口发送信息给下一个窗口
    window.addEventListener('message', receiveMessage);
    function receiveMessage(event) {
      event.source.postMessage('Nice to see you!', '*');
    }
</script>

<script>
    //过滤不是发给本窗口的信息
    window.addEventListener('message', receiveMessage);
    function receiveMessage(event) {
      if (event.origin !== 'http://www.segmentfault.com/page1.html') return;
      if (event.data === 'Hello World') {
          event.source.postMessage('Hello', event.origin);
      } else {
        console.log(event.data);
      }
    }
</script>

三、iframe

iframe载入页面和src内里的目的域是同一个域，是可以提议ajax要求（父子窗口）。 //条件是同源，差别源就不可以提议ajax要求。

差别窗口同源之间是可以猎取window对象，然则不能猎取window对象的属性和要领。 //差别源会报错

1、document.domain + iframe（同源可用 — 跨子域）

document.domain属性：一级域名雷同，二级域名差别可以完成window对象猎取。

页面一："https://segmentfault.com/page1.html"
<script>
    window.onload = function() {
        document.domain = "https://segmentfault.com/";        //设置domain
        window.getData = function() {
            //ajax要求
        }
    }
</script>

页面二："https://segmentfault.com/page2.html"
<iframe id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></iframe>
<script>
    //动态竖立iframe最好，猎取完数据烧毁。
    //document.domain设置本钱身或更高一级的父域，主域必需雷同。
    document.domain = "https://segmentfault.com/"        //设置domain
    function test() {
        var win = document.getElementById("iframe").contentWindow;
        win.getData("https://segmentfault.com/json_domain.php", function() {})
    }
</script>

瑕玷：主域名得一致。

2、window.name + iframe（非同源可用）

window.name属性：在一个窗口的生命周期内，不管是不是同源，同一个窗口的载入页面window.name属性是同享的，每一个页面都可以操纵。

页面一："https://segmentfault.com/page1.html"
<script>
    window.name = "this is data!"
</script>

页面二："https://segmentfault.com/page2.html"
<iframe id="iframe" src="https://segmentfault.com/page1.html" onload="test()"></iframe>
<script>
    //动态竖立iframe最好，猎取完数据烧毁。
    //猎取window.name
    function test() {
        var winName = document.getElementById("iframe").contentWindow.name;
        winName.src = "https://segmentfault.com/data.html";        //末了须要将iframe的src设置成当前域的一个页面地点
    }
</script>

瑕玷：兼容性不好

3、location.hash + iframe（非同源可用）

片断标识符：片断标识符是指url#号背面的部份。只是转变片断标识符页面不革新。

页面一："https://www.segmentfault.com/page1.html"
<script>  
    function startRequest(){
        var ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        ifr.src = 'https://www.example.com/page2.html#messgae';
        document.body.appendChild(ifr);
    }
    
    function checkHash() {
        var data = location.hash ? location.hash.substring(1) : '';
    }
    setInterval(checkHash, 2000);
</script>

页面二："https://www.example.com/page2.html#messgae"
<script>
    function callBack(){
        try {
            parent.location.hash = 'somedata';
        } catch (e) {
            // ie、chrome的平安机制没法修正parent.location.hash，
            // 所以要应用一个中心的example域下的代办iframe
            var ifrproxy = document.createElement('iframe');
            ifrproxy.style.display = 'none';
            ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata';    // 注重该文件在"segmentfault.com"域下
            document.body.appendChild(ifrproxy);
        }
    }
</script>

页面三："ttps:/www.segmentfault.com/page3html#somedata"
<script>
    //由于parent.parent和本身属于同一个域，所以可以转变其location.hash的值
    parent.parent.location.hash = self.location.hash.substring(1);
</script>

瑕玷：数据暴露在url，长度也有限定。

四、WebSocket

WebSocket：浏览器经由过程 JavaScript 向服务器发出竖立 WebSocket 衔接的要求，衔接竖立今后，客户端和服务器端就可以经由过程 TCP 衔接直接交流数据。

设置WebSocket要求头信息，服务器支撑就可以举行。

Origin: http://example.com        //依据域名是不是在白名单内来推断是不是可以通讯

瑕玷：完成本钱高。

五、CORS

cors是跨域资本分享。现CORS通讯的关键是服务器。只需服务器完成了CORS接口，就可以跨源通讯。

瑕玷：服务器设置，占用主域带宽。