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

Posted 雨晴闹闹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域问题常用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

Iframesrc属性由外域转向本地域,跨域数据即由iframewindow.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引用,可以是iframecontentwindow.

Message是需要发送的信息stringtargetOrigin是用于限制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一致才能生效,否则将跨域失败。

以上是关于跨域问题常用4种方法解决方案的主要内容,如果未能解决你的问题,请参考以下文章

Flask解决跨域

如何解决js跨域问题

web跨域解决方案1

前端设置请求头可以解决跨域问题吗

几种常用的ajax 跨域请求

js跨域请求数据的3种常用的方法