CORS跨域

Cross-origin resource sharing

Posted by ddxg on June 10, 2018

CORS 跨域

对于跨域问题,我之前只知道jsonp的解决方案,这周改版了一个很复杂的H5页面,让我接触到了另一种解决跨域的方案——CORS。刚开始还是一脸蒙蔽的,然后马上联想到了之前使用koa2的时候用过koa2-cors这个模块,当时也是解决跨域问题的,这两个应该是一样的吧。查阅资料后发现是不一样的东西。

看了阮一峰老师的跨域资源共享 CORS 详解 这片文章后,对CORS有了新的认识,原来CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。阮一峰老师的这片文章讲得非常详细,我也不是理解的很好,就先不多说了,不过有一个地方我这里记录一下。

文章中说,CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials 字段:

Access-Control-Allow-Credentials: true

另一方面,开发者必须在AJAX请求中打开withCredentials 属性:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

这里的写法是原生ajax的写法,如果使用到jQuery或者zepto等库的话,需要在ajax请求中添加xhrFields 属性,详情见:jQuery的官方文档

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

参考:阮一峰老师的跨域资源共享 CORS 详解