web跨域

常用的几种跨域处理方法:


 1、JSONP

 2、CORS策略

 3、document.domain+iframe的设置

 4、HTML5的postMessage

 5、使用window.name来进行跨域


跨域的原理解析及实现方法


1、JSONP(JSON with padding)

原理

      我们知道,在页面上有三种资源是可以与页面本身不同源的。它们是:js脚本,css样式文件,图片,像淘宝等大型网站,肯定会将这些静态资源放入cdn中,然后在页面上连

接,如下所示,所以它们是可以链接访问到不同源的资源的。

1)<script type="text/javascript" src="某某cdn地址" ></script>

2)<link type="text/css" rel="stylesheet" href="某个cdn地址" />

3)<img src="某个cdn地址" alt=""/>

  而jsonp就是利用了script标签的src属性是没有跨域的限制的,从而达到跨域访问的目的。因此它的最基本原理就是:动态添加一个<script>标签来实现。


实现方法:

    这里是使用ajax来请求的,看起来和ajax没啥区别,其实还是有区别的。

    ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

$.ajax({ 

        url:"http://crossdomain.com/services.php", 

        dataType:'jsonp', 

        data:'', 

        jsonp:'callback', 

        success:function(result) { 

            // some code

        } 

    }); 

上面的代码中,callback是必须的,callback是什么值要跟后台拿。获取到的jsonp数据格式如下:

flightHandler({

    "code": "CA1998",

    "price": 1780,

    "tickets": 5

});

jsonp的全称为json with padding,上面的数据中,flightHandler就是那个padding.


 JSONP的不足之处:

  1、只能使用get方法,不能使用post方法:

  我们知道 script,link, img 等等标签引入外部资源,都是 get 请求的,那么就决定了 jsonp 一定是 get 的。但有时候我们使用的 post 请求也成功,为啥呢?这是因为当我们指定dataType:'jsonp',不论你指定:type:"post" 或者type:"get",其实质上进行的都是 get 请求!

  2、没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。


 2、CORS策略

 原理:

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.

  CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。


实现方法:

  CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

  整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。


前端方面

以前我们使用Ajax,代码类似于如下的方式:

var xhr = new XMLHttpRequest();

xhr.open("GET", "/hfahe", true);

xhr.send();

// 这里的“/hfahe”是本域的相对路径。

如果我们要使用CORS,相关Ajax代码可能如下所示:

var xhr = new XMLHttpRequest();

xhr.open("GET", "http://blog.csdn.net/hfahe", true);

xhr.send();

// 请注意,代码与之前的区别就在于相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址。


服务器方面

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。


CORS策略的优缺点:

  优点:

    1、CORS支持所有类型的HTTP请求。

    2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

 缺点: 兼容性方面相对差一点,ie10或以上才支持


3、document.domain+iframe的设置  (只有在主域相同的时候才能使用该方法)

原理:

  浏览器中不同域的框架之间是不能进行js的交互操作的。但是不同的框架之间(父子或同辈),是能够获取到彼此的window对象的,但是,我们也只能获取到一个几乎

无用的window对象。比如,有一个页面,它的地址是 http://www.example.com/a.html , 在这个页面里面有一个iframe,它的src是 http://example.com/b.html , 很显然,这

个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。

  这个时候,document.domain就可以派上用场了,我们只要把 http://www.example.com/a.html 和  http://example.com/b.html 这两个页面的document.domain都设成

相同的域名就可以了。但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:

a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是

当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。


使用方法:

  比如在http://www.example.com/a.html 的页面里要访问 http://example.com/b.html里面的东西。

  在页面 http://www.example.com/a.html 中设置document.domain:

//http://www.example.com/a.html    A页面       

A页面
    

// 相当于用一个隐藏的iframe来做代理            $(function(){            try{                document.domain = "example.com"; //这里将document.domain设置成一样            }catch(e){}            $("#iframe").load(function(){                var iframe = $("#iframe").contentDocument.$;                ifram.get("http://example.com/接口",function(data){});            });        });   


在页面 http://example.com/b.html 中也设置document.domain,而且这也是必须的,虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值:

//http://example.com/b.html

<html>

<head>

    <title>B页面</title>

    <script type="text/javascript" src="jquery.js"></script>

</head>

<body>

    <div>B页面</div>

    <script>       

        $(function(){

            try{

            document.domain = "example.com"; //这里将document.domain设置成一样

            }catch(e){}

        });

    </script>

</body>

</html>

  这里有个注意点,就是在A页面中,要等iframe标签完成加载B页面之后,再取iframe对象的contentDocument,否则如果B页面没有被iframe完全加载,在A页面中通过contentDocument属性就取不到B页面中的jQuery对象。

      一旦取到B页面中的jQuery对象,就可以直接发ajax请求了,这种类似“代理”方式可以解决主子域的跨域问题。

缺点:

  只有在主域相同的时候才能使用该方法

4、HTML5的postMessage

原理:

  没啥原理,就是一个html5所提供的一个API.--->HTML5 window.postMessage是一个安全的、基于事件的消息API。


 在需要发送消息的源窗口调用postMessage方法即可发送消息。其中.源窗口可以是全局的window对象,也可以是以下类型的窗口:

  1、文档窗口中的iframe:

var iframe = document.getElementById('my-iframe');

var win = iframe.documentWindow;

  2、JavaScript打开的弹窗:

var win = window.open();

  3、当前文档窗口的父窗口:

var win = window.parent;

  4、

var win = window.opener();


      发送消息:找到源window对象后,即可调用postMessage API向目标窗口发送消息:

win.postMessage(msg, targetOrigin);

说明:postMessage函数接收两个参数:

  1、msg, 将要发送的消息,可以使一切javascript参数,如字符串,数字,对象,数组等。

  2、targetOrigin,这个参数称作“目标域”,注意,是目标域不是本域!比如,你想在2.com的网页上往1.com网页上传消息,那么这个参数就是“http://1.com/”,而不是2.com.协议,(一个完整的域名包括:主机名,端口号。如:http://g.cn:80/)


    接收消息:那目标窗口要怎么接收传过来的数据呢,只要监听window的message事件就可以接收了。

var onmessage = function (event) {

    var data = event.data;

    var origin = event.origin;

    //do someing

};

if (typeof window.addEventListener != 'undefined') {

    window.addEventListener('message', onmessage, false);

} else if (typeof window.attachEvent != 'undefined') {

    //for ie

    window.attachEvent('onmessage', onmessage);

}

message事件监听函数接收一个参数,Event对象实例,该对象有三个属性:

data : 消息

origin:消息的来源地址

source:发送消息窗口的window对象引用


使用方法(案例):

  http://test.com/index.html--> 发送消息的页面


        
    window.onload=function(){        window.frames[0].postMessage('苍老师','http://lslib.com');    }


http://lslib.com/lslib.html --> 接收消息的页面

<!-- 这个是 http://lslib.com/lslib.html 页面 -->

<script type="text/javascript">

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

        console.log(e.origin,e.data);

        alert('收到妹子一枚:'+e.data);

    });

</script>


优缺点:

 优点:方便,安全,有效的解决了跨域问题

 缺点:万恶的资本主义,ie8+才支持,而且ie8+<ie10只支持iframe的方式。


 5、使用window.name来进行跨域(相对比较完美的方法)

 原理:  

 当iframe的页面跳到其他地址时,其window.name值保持不变,并且可以支持非常长的 name 值(2MB)。

  浏览器跨域iframe禁止互相调用/传值.但是调用iframe时 window.name 却不变,正是利用这个特性来互相传值,当然跨域下是不容许读取ifram的window.name值.

       所以这里我们还要准备一个和主页面http://www.a.com/main.html 相同域下的代理页面http://www.a.com/other.html ,iframe调用子页面 http://www.b.com/data.html


使用方法:

 1、 准备三个页面:

 http://www.a.com/main.html   //应用页面

  http://www.a.com/other.html    // 代理页面,要求和应用页面在同一个域。一般是一个空的html

      http://www.b.com/data.html   //应用页面获取数据的页面,简称:数据页面

    2、

     数据页面将数据传到window.name中去。如下:

     http://www.b.com/data.html中的 data.html

// data.html

window.name="苍老师";  //可以是其他类型的数据,比如数组,对象等等


    http://www.a.com/main.html   //应用页面的代码如下:

var iframeData;var state = 0;//开关变量var iframe = document.createElement('iframe'); //创建iframevar loadfn = function() {    if (state === 1) {        iframeData = iframe.contentWindow.name;  // 读取数据        alert('获取到了iframe传过来的妹子'+iframeData);    }else if (state === 0) {        state = 1;        iframe.contentWindow.location = 'http://www.a.com/other.html';  //这里是代理页面 other.html                  /**            这里说明一下:            由于iframe的location改变了,相当于重新载入页面(这是iframe的性质决定的),于是重新执行loadfn方法。

由于当iframe的页面跳到其他地址时,其window.name值保持不变,并且此时开关变量 state已经变为1,

于是就可以获取到window.name值,也就达到了跨域访问的目的了。        **/            };}iframe.src = 'http://www.b.com/data.html'; //这是是数据页面,data.htmlif (iframe.attachEvent) {    iframe.attachEvent('onload', loadfn);} else {    iframe.onload  = loadfn;}document.body.appendChild(iframe);


3、获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。

    iframe.contentWindow.document.write('');

    iframe.contentWindow.close();

    document.body.removeChild(iframe);


优缺点:

  浏览器支持情况好,是比较普遍的使用方法



总结


以上总结了js跨域的几种方法,当然还有其他的方法,不过没有。他们各有千秋。其实最主要的区别除了实现方式不一样,主要是浏览器的兼容问题而已。


JSONP:

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。


CORS策略

  优点:使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。


     缺点:古老的浏览器不支持,不过大部分现代浏览器都支持


document.domain+iframe:只适用于主域相同的跨域问题处理


html5的postMessage:

  优点是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。如果是现代浏览器,首选。

  缺点: ie8以前不支持


window.name:

  主要是应用当frame的页面跳到其他地址时,其window.name值保持不变的原理。兼容性好。需要照顾落后的浏览器时,首选。、


小小总结,有误之处,欢迎指出

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 原文:https://www.cnblogs.com/smiler/p/5829621.html 阅读目录 什么是...
    wendaoliu阅读 276评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 515评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 822评论 0 0
  • 为什么需要跨域? 浏览器 同源策略 (域名、协议、端口相同)限制其他网页对本网页进行非法篡改, 只有带有 src ...
    KeKeMars阅读 883评论 1 6
  • 总有着一股劲想充斥到别人的圈子里,不以见得是一件多么容易,多么好的事情。回到自己才是
    幺歌阅读 388评论 0 0