常用跨域请求详解

跨域背景介绍：
所有支持Javascript的浏览器都会使用同源策略这个安全策略。导致我们无法直接访问非同源的链接，无法取得非同源的数据，但在项目中我们的数据经常写在另一个源中，于是我们需要突破同源限制，取得其他源的数据，这就叫跨域。

一、JSONP跨域方法

操作方式：在 <script> 标签中请求js文件中后缀带一个callback=showData的参数，showData是在本地调用的函数名称，用来接收数据然后处理。后端通过callback发送数据过来。
原理：<script>中的src地址可以跨域请求js资源，所以只能把传输过来的数据通过js来处理接受。这样就可以正确接收数据了
只能处理GET类型的http请求，不能处理其他的，但是他的兼容性更强，支持所有支持js 的浏览器

二、CORS跨域方法

CORS最大的作用就是能调取非自己域名下的资源
以下理解CORS的简单请求：
简单来说，就是服务器端和web网页端对码，浏览器看到如果能对上码就表示允许跨域请求。
对于简单请求来说，浏览器直接发送CORS请求：在头信息中添加一个Origin字段，说明自己的请求来自那个协议+域名+端口。
服务器端根据请求域名端口判断是否同意这次请求
两种情况，如果服务器端发现无法符合这次请求，那么服务器会返回一个正常的HTTP回应。浏览器发现返回的字段中没有Access-Control-Allow-Origin字段，会抛出错误
第二种情况，如果本次请求在服务器端允许范围内，那么会返回Access-Control-Allow-Origin：允许的域名。浏览器会检测到服务端返回的响应头中有该字段，就会加载跨域请求的资源。
总结来说，浏览器阻止随意的跨域请求是为了安全。而CORS请求要求双方都做处理，相当于双方握手，服务器端请求返回对应的代码，保证了安全。

三、postMessage跨域方法
postMessage 是 HTML5 中新增方法，可实现跨域通信；
postMessage 并不是向服务器读写资源，只是向外发送消息而已；接收端可以用messag选择是否监听
postMessage 是 window 的一个方法，所以只能向windows窗口发送消息；
代码演示

        var input = document.querySelector('.main input');
        input.addEventListener('input', function () {
            console.log('window:' + this.value);
            window.frames[0].postMessage(this.value, '*');
        });

        window.addEventListener('message', function (e) {
            console.log('window:'+ e.data);
            input.value = e.data;
        })

    var input = document.querySelector('input');
    input.addEventListener('input', function () {
        console.log('iframe:'+ this.value);
        window.parent.postMessage(this.value, 'http://a.com:8080');
    });

    window.addEventListener('message', function (e) {
        console.log('ifream:'+ e+.data);
        input.value = e.data;
    })

总结：JSONP和CORS还是目前最主流的方法，一个兼容性强可以做一些小的应用，CORS功能性强，适用范围广。使用的时候可以选择性使用

常用跨域请求详解

推荐阅读更多精彩内容