提起浏览器的同源策略,你们都很熟悉。不一样域的客户端脚本不能读写对方的资源。可是实践中有一些场景须要跨域的读写,因此出现了一些hack的方式来跨域。但这些方式都存在缺陷,没法完美的实现跨域读写。因此在XMLHttpRequest v2标准下,提出了CORS(Cross Origin Resourse-Sharing)的模型,试图提供安全方便的跨域读写资源。web
1、背景跨域
提起浏览器的同源策略,你们都很熟悉。不一样域的客户端脚本不能读写对方的资源。可是实践中有一些场景须要跨域的读写,因此出现了一些hack的方式来跨域。好比在同域内作一个代理,JSON-P等。但这些方式都存在缺陷,没法完美的实现跨域读写。因此在XMLHttpRequest v2标准下,提出了CORS(Cross Origin Resourse-Sharing)的模型,试图提供安全方便的跨域读写资源。目前主流浏览器均支持CORS。浏览器
2、技术原理安全
CORS定义了两种跨域请求,简单跨域请求和非简单跨域请求。当一个跨域请求发送简单跨域请求包括:请求方法为HEAD,GET,POST;请求头只有4个字段,Accept,Accept-Language,Content-Language,Last-Event-ID;若是设置了Content-Type,则其值只能是application/x-www-form-urlencoded,multipart/form-data,text/plain。提及来比较别扭,简单的意思就是设置了一个白名单,符合这个条件的才是简单请求。其余不符合的都是非简单请求。 服务器
之因此有这个分类是由于浏览器对简单请求和非简单请求的处理机制是不同的。当咱们须要发送一个跨域请求的时候,浏览器会首先检查这个请求,若是它符合上面所述的简单跨域请求,浏览器就会马上发送这个请求。若是浏览器检查以后发现这是一个非简单请求,好比请求头含有X-Forwarded-For字段。这时候浏览器不会立刻发送这个请求,而是有一个preflight,跟服务器验证的过程。浏览器先发送一个options方法的预检请求。下图是一个示例。若是预检经过,则发送这个请求,不然就不拒绝发送这个跨域请求。app