浅谈跨域

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来解决。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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