浅谈跨域

1.跨域的由来

浏览器为了保证网站安全,如限制a网站的cookie不被b网站读取,故浏览器禁止非同源情况下进行ajax请求,cookie访问,dom操作。非同源是指URL中协议,域名和端口有一项以上不同。然而,在某些特殊的业务场景下,我们需要获取非同源的数据,故诞生了跨域。

2.CORS(Cross-Origin Resource Sharing,跨域资源共享)

CORS是W3C规定的标准跨域方式,其基本思想是使用自定义的http头部让浏览器与服务器进行沟通,从而决定请求或响应是否成功。

与xhr的区别:

1>.cookie不会随请求发送,也不会随响应返回

2>.只能设置http请求头里面的content-type

3>.不能访问响应头信息

浏览器的兼容:

IE8-IE10是xdr(XDomainRequest),其它使用XMLHttpRequest

兼容写法:

function createCorsRequest(method,url){

var xhr = new XMLHttpRequest();

if(“withCredentials” in xhr){

xhr.open(method,url,true);

}else if(typeof XDomainRequest != “undefined”){

xhr= new XDomainRequest();

xhr.open(method,url);

}else{

xhr = null;

}

return xhr;

}

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

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

3.其它跨域

1.jsonp

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。

它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

注意,该请求的查询字符串有一个callback参数,用来指定回调函数的名字,这对于JSONP是必需的,即后台服务器返回的函数名要与URL中参数一致。

写法:

var script = document.createElement(“script”);

script.type = “text/javascript”;

script.src = “http://xx/json/?callback=handlefn”;

document.body.insertBefore(script, document.body.firstChild);

function handlefn(data){console.log(data)}

2.图片ping

一种利用img进行跨域的技术,和jsonp利用<script>元素一样,因为网页可以加载任何网页中的图片。

主要的作用是用于在线广告跟踪浏览量,用户查看页面次数等

用法:

var img = new Image();

img.src = “http://xx.com/img/xx.png”;

img.onload = img.onerror = function(){n=n+1;}

3.Comet

sse和Web Sockets

sse支持长轮训,短轮训和HTTP流

长轮询是跟服务器发起一个http请求后,服务器不是立马返回数据,而是等数据有更新后在返回,返回后客户端在发请求,以此类推。

短轮训则是定时的向服务器发起请求,服务器不管数据有无更新都返回结果,由前端去判断数据是否已经更新。

HTTP流则是在页面整个生命周期内只使用一个http连接。由服务器主动周期性的向客户端推送数据。

web sockets是在一个单独的持久的连接上提供双全工,双向通信,使用的是一种新的通信协议。

总结:

处理ajax的跨域可以选择JSONP、CORS,服务端设置代理、WebSocket。如果主域相同,处理多级子域之间的通信可以选择document.domain,处理不同域之间的iframe,子窗口可以选择window.name、window.postMessage、location.hash来解决。

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

推荐阅读更多精彩内容

  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,286评论 0 6
  •     对于前端开发的码农们,跨域问题一定不陌生,在我还是个新手时,就曾被跨域问题折磨的欲仙欲死。     之前项...
    朱亮_7dd7阅读 563评论 0 0
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 830评论 0 4
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 1,059评论 0 2
  • “饭局约在李子坝的XX鸡,进店后服务员告诉我,包间在四楼。上到四楼最后一级楼梯,我傻眼了,面前是一条马路!呆了三秒...
    那一座城阅读 483评论 0 1