正文
-
如果XML发起的请求不是一个简单请求,那么浏览器会便会先发起一次 CORS 预检请求来检查自己是否有权限。所以为了避免多余的请求,一定要确保自己的请求是简单请求
-
如果想要在请求返回时由服务器种上第三方cookie,那么需要给XHR实例设置其withCredentials属性为true。在IE8-9中,微软给出过一个类似的标准实现:XDomainRequest接口(以下简称XDR)。这个接口虽然也能够实现跨域请求,但是它有一些限制。限制之一就是IE会剥离所有的cookie之后再发给服务器端,同时IE也会忽略所有的服务器端返回中的Set-Cookie指令。简而言之就是不支持cookie
从CORS的支持程度来说其实它已经几乎被所有的主流浏览器支持了,除了IE<10。随着浏览器的更新换代,相信不久之后CORS将会成为跨域请求的终极选择。不过目前为止,如果你的第三方Javascript还需要支持IE<10,那么你需要考虑一些其他方案。
JSONP协议
提到跨域请求一般大家先想到的是JSONP,其本质是利用浏览器可以加载不同域名下的Javascript文件。服务器端根据URL上的参数动态的生成不同的Javascript文件返回。这样浏览器端便可以接收到服务端的返回结果了。
例如一个典型的JSONP请求接口地址如下:
http://test.com/jsonp?callback=callback&id=0067ED
服务器端则会返回如下Javascript文件,其中包含了数据:
callback && callback({
id: '0067ED',
username: 'mmzhou'
// ......});
浏览器在接收到返回之后会自动运行这段JS,然后调用全局的callback方法。这个callback方法是由调用方的JS事先事先准备好的,这样来接收到返回的参数。通过JSONP协议服务器端可以传给浏览器大量的数据。通常请求下一般都会使用JSONP来实现拉取数据、获取配置等等才做。但有的时候我们仅仅需要向后端发送数据,并且不关心返回结果是什么,甚至不在乎有没有成功。
ping
这种只需要发送数据且不在乎返回结果的请求类型,我们在这篇文章中称之为ping。也有很多人喜欢称之为beacon。
小图片
ping协议其实是一种很古老的跨域方法。它的本质是利用了浏览器可以获取不同域名下图片的原理,把请求参数放在了图片地址的URL参数中发给后端。因为是图片的请求,所以网页上的JS是不能得到返回图片是什么样的。它的大致JS代码如下:
浏览器通过Image接口实例化之后的赋值其src属性为请求接口的URL地址,并把请求参数放在URL地址中。可以看到图片实例不需要插入到页面DOM树中,避免了返回图片展示出来被用户看到。
后端在接到请求之后返回204请求(表示执行成功,但是没有数据)或者是一张1x1像素的gif图片。204与gif图片的区别在于你是否想要知道请求响应是否成功。因为204返回会在部分浏览器下导致onerror的回调,这就会让JS分不清是请求发送失败还是成功。
页面关闭时发送数据
ping请求是很轻的,因为它只需要创建一个Image实例即可。但是它也有一个缺陷。我们先假设第三方Javascript需要实现一个功能:在页面关闭时发送请求给服务器端记录页面已经被关闭。一般的做法是在onload或者beforeOnload事件中发送ping请求。绝大多数浏览器会延迟卸载以保证图片的载入(数据发送成功),但并不是所有浏览器都是如此。而且浏览器会忽略在onload事件回调中产生的异步XHR请求 。所以要确保请求发送成功是很难的。
如果浏览器支持CORS,那么发送同步的XHR请求是可以 block 浏览器的UI主线程,同样也可以block浏览器关闭直到服务器端返回结果。但是如果服务器端响应慢,耗时超过250ms以上(普通人能够感知到了),这就会带来很差的用户体验。同时在浏览器UI主线程中的同步XHR请求已经在标准中被列为deprecated,之后浏览器将可能会不再支持(尽管这是一个漫长的过程)。