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

Posted 2020-10-10 雨晴闹闹

跨域问题

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一致才能生效，否则将跨域失败。