跨域问题经常使用4种方法解决方案

跨域问题

1.JSONP：动态插入script标签，经过script标签引入一个js文件，这个文件载入成功以后会执行咱们在url参数中制定的函数，而且会把咱们须要的json数据传入

代码实现

Jquery方法

$.getJSON("http://a.com/data.php?callback=?",function dosomething(jsondata){
    //处理得到的jsondata数据
})

jquery会自动生成一个全局函数来替换callback=?中的问号，以后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的做用。
$.getJSON会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。
getJSON: function( url, data, callback ) {
    return jQuery.get( url, data, callback, "json" );
}

2.window.name+iframe

Iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域，巧妙的绕过了浏览器的跨域访问限制，name 值在不一样的页面（甚至不一样域名）加载后依旧存在，而且能够支持很是长的 name 值（2MB）。

代码实现：

var data = '';
var ifr = document.createElement('iframe');
ifr.src = "http://localhost:8081/data.html";
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function() {
    ifr.onload = function() {
        data = ifr.contentWindow.name;
        console.log('收到数据:', data);
    };
    ifr.src = "http://localhost:8080/同目录没有用.html";
}

把data.html页面载入进来?

显然咱们不能直接在跨域1.html页面中经过改变window.location来载入data.html页面，
由于咱们想要即便跨域1.html页面不跳转也能获得data.html里的数据。
答案就是在跨域1.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，而后跨域1.html再去获得iframe获取到的数据。
充当中间人的iframe想要获取到data.html的经过window.name设置的数据，只须要把这个iframe的src设为data.html就好了。而后跨域1.html想要获得iframe所获取到的数据，也就是想要获得iframe的window.name的值，还必须把这个iframe的src设成跟跨域1.html页面同一个域才行，否则根据前面讲的同源策略，跨域1.html是不能访问到iframe里的window.name属性的。这就是设置iframe的src='同目录没有用.html'的缘由。

3.H5中的postMessage跨文档信息传输Cross Document Messaging

代码实现：

A.Html

<iframe src="http://localhost:8081/b.html"></iframe>

window.onload = function() {
    var targetOrigin = 'http://localhost:8081';
    window.frames[0].postMessage('要发了', targetOrigin);

//otherwindow.postMessage(message, targetOrigin)中，otherwindow是对接收信息页的window引用，能够是iframe的contentwindow.

Message是须要发送的信息string，targetOrigin是用于限制otherwindow，*表示不作限制
}
window.addEventListener('message', function(e) {
    console.log('a收到消息', e.data);
});

B.Html

 window.addEventListener('message', function(e) {

        if(e.source != window.parent) {

   return;

        }

        let data = e.data;

        console.log('b.html 接收到的消息:', data);

        parent.postMessage('我已经接收到消息了!', e.origin);

});

4.CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）它容许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。

CORS 须要浏览器和服务器同时支持才能够生效，对于开发者来讲，CORS 通讯与同源的 ajax 通讯没有差异，代码彻底同样。浏览器一旦发现 ajax 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。

所以，实现 CORS 通讯的关键是服务器。只要服务器实现了 CORS 接口，就能够跨源通讯。服务器设置相应头中的 Access-Control-Allow-Origin，浏览器容许跨域请求，须要浏览器支持H5，该值要与请求头中 Origin一致才能生效，不然将跨域失败。