事实上,面试时我喜欢问跨域,因为多数开发者都知道它并且常用,而我希望能从面试者的回答中知道他在这个问题的深入程度,进一步看看面试者研究问题的思维方式及钻研精神,然而确实难到了很多人,当然这也不是面试通过的必要条件;这些都是题外话了,呵呵~~~,这里也不炒冷饭如何实现跨域,也不是分析CORS的原理,因为谷歌一下就有很多参考资料。

  有三点内容:dataType、contentType、withCredential;既然说是CORS基础要点,这三点也当然是围绕着 CORS 来讲。

dataType

  dataType有些人可能会觉得陌生,但说起jquery或者是zepto的ajax请求,就想起来了,使用$.ajax请求时,经常会带上参数dataType : ‘json’,如下图:
dataType

  dataType属性是为了表明用什么格式解析服务端响应的数据,json表示ajax接收服务端响应的数据时解析为JSON格式,但是你会发现有时候即使不设置dataType,也能够正常解析响应数据,页面上该显示的内容依然可以正常显示,因为框架贴心,zepto在你不设置dataType的时候,默认读取服务端的响应头Content-Type,例如zepto把服务端的响应头ContentType : application/json转换成dataType : ‘json’,所以只要跟服务端约定好了,前端开发中可以不需要设置dataType,当然了,设置这个属性会更让代码更健壮。

  所以,dataType只是框架(zepto/jquery等)封装时为了方便解析而定义的属性,并非是原生ajax的属性。

contentType

  严格来讲是Content-Type,这是http头里面的一个属性,无论是请求头还是响应头都可以有这个属性,但作用并不一样,另外,zepto的ajax请求配置中可以设置contentType,如下图,它是用来设置请求头中的Content-Type;
Content-Type

先说请求头中的Content-Type,是为了告诉服务端该请求实例的数据格式,一般情况下不需要设置,除非服务端有特殊要求,但如果设置的值超过这三个值application/x-www-form-urlencoded、multipart/form-data、text/plain,CORS跨域请求时会触发预请求,至于什么是预请求,这里不赘述,可以自行查一下百科;

  再看看返回头中的Content-Type,反过来,是服务端告诉客户端响应实例的数据格式,浏览器也会跟据格式来决定是显示成网页、JS、CSS或是下载等等,对于浏览器来讲,这是必需的属性。

withCredentials

  默认情况下,一般浏览器的CORS跨域请求都是不会发送cookie等认证信息到服务端的,除非指定了xhr.withCredentials = true,但是只有客户端单方面的设置了这个值还不行,服务端也需要同意才可以,所以服务端也需要设置好返回头Access-Control-Allow-Credentials: true;还有一点要注意的,返回头Access-Control-Allow-Origin的值不能为星号,必须是指定的域,否则cookie等认证信息也是发送不了。

  关于withCredentials,还可以参阅msdn这里:
withCredentials