跨域解决方案

一、什么是跨域

跨域，是指浏览器不能执行其它网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

同源策略会限制以下行为：

a、Cookie、LocalStorage和IndexDB无法读取；

b、DOM和JS对象无法获取；

c、Ajax请求发送不出去；

二、常见的跨域场景

同源策略是指，域名、协议、端口均为相同。

 

三、跨域的解决方法

1.jsonp跨域（仅支持get）

原理：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。script标签只支持GET请求，所以JSONP也只支持GET的请求方法。

方式：

    a、可以使用原生方法，createElement('script')一个script标签。然后为这个script的src赋值。然后appendChild到body上（可在链接上携带callback参数打印出服务器返回内容）；

    b、jquery页支持jsonp，只需将请求的datatype设为“jsonp”；

 

2.document.domain + iframe跨域

要求：主域名服务器必须相同。

如： a.bamaying.com a.html 请求 b.bamaying.com下 b.html 资源

此时a.html,b.html需设置document.domain = 'bamaying.com';, 然后a页面中定义iframe标签，src为b.bamaying.com/b.html;

具体获取内容方法:

$("#iframe").load(function(){
    var jq = document.getElementById('iframe').contentWindow.$
jq.get("http://nealyang.cn/test.json",function(data){
    console.log(data);
    });
});

3.window.name + iframe跨域（get请求）

window.name属性可设置或者返回存放窗口名称的一个字符串。

过程：

如index.html页面请求远端服务器上的数据，我们在该页面下创建iframe标签，该iframe的src指向服务器文件的地址（iframe标签src可以跨域），服务器文件里设置好window.name的值，然后在index.html里面读取iframe中的window.name的值。

 

4.location.hash + iframe跨域（get请求）

 

5.postMessage跨域

包括： 接收信息的message事件、发送信息的postMessage()方法.

postMessage():

otherWindow.postMessage(message, targetOrigin);

otherWindow： 目标窗口（要给哪一个window发送信息）；

message： 要发送的信息；

targetOrigin： 限定消息的接收范围，不限制就用*；

 

a.html(http://www.nealyang.cn/a.html)

 

<iframe id="iframe" src="http://www.neal.cn/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向neal传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.neal.cn');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from neal ---> ' + e.data);
    }, false);
</script>

 

b.html(http://www.neal.cn/b.html)

 

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from nealyang ---> ' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 处理后再发回nealyang
            window.parent.postMessage(JSON.stringify(data), 'http://www.nealyang.cn');
        }
    }, false);
</script>

 

6.跨域资源共享CORS（主流跨域解决方案，支持所有的http请求）

CORS是一个W3C标准，它允许浏览器向跨源服务器，发出XMLHttpRequest请求。浏览器支持：IE10+， IE8/9需要使用XDomainRequest对象支持；

原理：CORS通信过程，前端是由浏览器自动完成，浏览器一旦发现跨源，就会自动添加一些附加的头信息，有时还会多出附加请求。实现CORS通信关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。

类型： 简单请求、非简单请求。

 

7.webscoket协议跨域

实现了浏览器与服务器的全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。一般使用socket.io。

 

8.node代理跨域