说说CORS与jsonp

前言

浏览器出于防止潜在安全风险的考虑,使用了同源策略,这一方面保证了我们数据的安全, 另一方面却又限制了我们的手脚,基于此,开发者们与标准制定组织提供了不同的解决方案, 这里主要说说CORS与jsonp。

什么是同源策略

同源指的是两个域需要协议,子域名,主域名与端口号都保持一致,四者有一个不同,即属于跨域。 注意: http://localhost:8080与http://127.0.0.1:8080不属于同源,也就是说,即使IP地址一致,但是一个是域名,一个是IP地址,也不属于同源。

CORS的使用与注意点

CORS:跨域资源共享,是W3C制定的一个草案,定义了在必须访问跨源资源时,浏览器和服务器该怎么沟通。

CORS的实现原理是,浏览器发出请求报文中会额外包含一个Origin头部,该头部的值是当前页面的源信息(协议,域名和端口),服务器收到请求报文后,如果同意这个跨源请求,就在响应报文的头部添加Access-Control-Allow-Origin,值与请求报文中的Origin头部的值一致,如果响应报文中没有这个头部或者有,但是值不一致,这次的跨源请求就会失败。

浏览器原生支持CORS,但是不同的浏览器支持的方式不同。 IE8及以上版本引用了XDR(XDomainRequest)类型,这个对象和XHR对象类似,使用这个对象,可以实现安全可靠的跨域通信。 XDR的使用与XHR类似,使用过程如下:

  1. 实例化XDR
var xdr = new XDomainRequest();
复制代码
  1. 调用open(),open()接收两个参数,请求所用的方法以及URL,所有的XDR都是异步执行的,所有不需要第三个参数。
   xdr.open('get','#');
复制代码
  1. 调用send(),如果使用的是get方法,传入null,如果是post方法,传入字符串。
 xdr.send(null);
复制代码
  1. 为xdr绑定事件处理函数。xdr支持的事件包括load,error,timeout。需要说明一点的是,这部分的事件监听器需要在调用open()之前声明,这里只是行文需要。 4.1 load事件 在接收到响应后,你可以访问响应的原始文本,但是没有办法确定响应的状态码,只有在响应有效的/情况下才会触发load事件,如果接收到的响应中不包含Access-Control-Allow-Origin头部的话,则会触发error事件。
xdr.onload=function(){
  console.log(xdr.resonseText);
}
复制代码

4.2 error事件 导致XDR请求失败的因素很多,所有为每个xdr对象绑定该事件的处理函数是很有必要的,但是该事件抛出的信息有限,我们只能确定请求失败了,并不能得知请求失败的原因。

xdr.onerror=function(){
  console.log('get a error');
}
复制代码

4.3 timeout事件 xdr对象有一个timeout属性,该属性表明请求自发出多久后超时,当为其赋值后,在给定的时间内还没接受到响应,就会触发timeout事件。

xdr.ontimeout=function(){
  alert('time is too long');
}
复制代码

使用XDR需要注意的点:

  1. cookie不会随请求发送,也不会随请求返回。
  2. 不能访问响应头部信息,这意味着xdr对象没有getResponseHeader()和getAllResponseHeaders()。
  3. 只支持get和post方法。
  4. 当使用post方法时,xdr对象有一个contentType属性,这个属性可以表示要发送的数据的格式,这是xdr对象能够影响头部信息的唯一方法。

其他浏览器对CORS的实现 其他主流浏览器通过XHR对象原生支持CORS,在尝试打开不同来源的资源时,XML可以自动触发这个行为,有一点不同的是,open方法中的URL参数需要传入绝对路径。

使用XHR对象进行跨域通信的注意点:

  1. 不能使用setRequestHeader()设置自定义头部。
  2. 不能发送和接收cookie。
  3. 调用getAllResponseHeaders()返回空字符串,调用getResponseHeader()报错。
  4. 由于同源请求和跨源请求都使用同样的接口,因此对于本地资源,使用相对URL,对跨源的资源,使用绝对路径,这样可以避免跨源请求时的限制(见1,2)。

这个给出一个例子,本地文件是index.html,服务端文件为server.js,需要注意的是,我们需要使用http-server(其他的也可以)搭建一个静态资源服务器,关于http-server的使用,点击这里,这样可以使用http协议访问index.html文件,使用file协议无法使用CORS。

// index.html

                    
                    

你可能感兴趣的:(说说CORS与jsonp)