JS 跨域

1、概念

　　跨域是指 从一个域名的网页去访问另外一个域名的资源，只要协议、域名、端口有任何一个不一样，就被看成是跨域。

　　这是有浏览器的 同源策略 形成的。所谓同源是指， 域名、协议、端口均相同。

　　同源策略限制一下几种行为：

　　　　一、Cookie、LocalStorage 和 IndexDB（浏览器本地数据库） 没法读取；

　　　　二、DOM 和 JS对象没法获取；

　　　　三、AJAX 请求不能发送

 

2、浏览器为何限制跨域访问呢？

　　缘由在于同源策略 是用来隔离潜在恶意文件的关键机制。若是缺乏了同源策略，浏览器很容易受到XSS（跨域脚本攻击）和 CSRF（跨站请求伪造）的攻击。

 

3、跨域解决方案

　　一、 经过jsonp跨域
　　二、 document.domain + iframe跨域
　　三、 location.hash + iframe
　　四、 window.name + iframe跨域
　　五、 postMessage跨域
　　六、 跨域资源共享（CORS）
　　七、 nginx代理跨域
　　八、 nodejs中间件代理跨域
　　九、 WebSocket协议跨域

　　　　

　　一、经过 JSONP 跨域

　　　　原理：经过script标签引入一个js文件，这个js文件载入成功后会执行咱们在url参数中指定的函数，而且会把咱们须要的json数据做为参数传入（即用 Javascript 动态script，再请求一个带参网址实现跨域通讯）。

　　

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

　　服务端返回数据：

　　

onBack({"status": true, "user": "admin"})

　　

　　JSONP的优缺点：　

　　　　优势：

　　　　　　一、它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；

　　　　　　二、它的兼容性更好，在更加古老的浏览器中均可以运行，不须要XMLHttpRequest或ActiveX的支持；

　　　　　　三、而且在请求完毕后能够经过调用callback的方式回传结果。　

 

　　　　 缺点：

　　　　　　一、只能实现 GET 一种请求；

　　　　　　二、只支持跨域HTTP请求这种状况。

 

　　注：在 html 中，拥有src属性的元素能够跨域访问资源，src 属性拥有跨域请求的特色。

　　　 经过src属性，img能够引用其它站点或图床的图片，大大下降本站的图片持久。

　　　　经过src属性，script能够引用CDN的JS文件，加速了浏览器的脚本文件的下载，跨域的数据获取更加高效和方便。

　　　　经过src属性，iframe能够嵌入其它站点的页面，可让页面的框架和可变内容分离，内容引用较为灵活，方便引用其它站点。

　　不一样的是：

　　　　使用 img标签 不能访问服务器返回的响应内容，只能单向的发送get请求。

　　　　使用 script标签 实现的jsonp跨域能够将服务器响应文本以函数参数的形式返回。

　　JSONP就是利用了script标签的跨域能力

 

　　二、经过 CORS（跨域资源共享）实现跨域

　　　　CORS 的基本思想就是使用自定义的 HTTP 头部 让浏览器与服务器进行沟通，决定请求或响应式是成功仍是失败。

　　　　服务器对于CORS的支持，主要是经过设置 Access-Control-Allow-Origin 来进行的，若是浏览器检测到响应的设置，就容许 AJAX 进行跨域访问。

　　　　只须要在后台中加上响应头来容许域请求，在被请求的Response header中加入如下设置，就能够实现跨域访问。

　　

//指定容许其余域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'

　　　　参考博文：http://www.ruanyifeng.com/blog/2016/04/cors.html

 　　

　　3.经过 postMessage 实现跨域

　　　　postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数很少能够跨域操做的window属性之一，它可用于解决如下方面的问题：
　　　　　　一、 页面和其打开的新窗口的数据传递
　　　　　　二、 多窗口之间消息传递
　　　　　　三、 页面与嵌套的iframe消息传递
　　　　　　四、上面三个场景的跨域数据传递

　　　　用法：postMessage(data,origin)方法接受两个参数
　　　　　　data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，因此传参时最好用JSON.stringify()序列化。
　　　　　　origin： 协议+主机+端口号，也能够设置为"*"，表示能够传递给任意窗口，若是要指定和当前窗口同源的话设置为"/"。

 

　　　　（1）a.html(http://www.domain1.com/a.html)

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

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

　　　　

　　　　(2)、b.html(http://www.domain2.com/b.html)

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

 

　　

 

　　

　　参考博文：

　　　　http://www.javashuo.com/article/p-gjnaksry-em.html

 　　　  http://www.javashuo.com/article/p-blmelnye-bd.html

　　感谢博主分享！