要讲清楚跨域问题,必须先知道浏览器的同源策略,跨域问题只跟浏览器相关,脱离了浏览器的范围之后根本就不存在跨域问题,因为这一切的规则都是浏览器搞出来的,而浏览器为什么搞出来这一套规则,主要是为了让用户能够放心的点开浏览器上的每一个链接,浏览器出于安全考虑会对同源请求放行,对异源请求限制,这一套限制规则就是同源策略。
所以说要理解浏览器的同源策略,就要先理解什么是同源请求,什么是异源请求,对异源请求又做了什么样的限制。它做了这个限制虽然是为了安全考虑,但是也对开发带来了一定的困扰,而我们把这种困扰就称之为跨域问题。
什么是同源,异源?
想搞清楚什么叫做同源,就要先搞清楚什么叫做源。在一个URL地址里面,源就表示的是协议+域名+端口。
那什么是同源呢?那不就是两个源进行比较,它们的协议相同、域名相同、端口一样,那么这就是同源,反之有一个不一样那就是异源。看几个例子:
前面三组都是异源,最后一组是同源。
什么是同源请求和异源请求?
我们访问一个页面是通过一个URL地址去访问的,这个URL地址我们叫做页面源,在页面中可能会发生很多的请求比方说请求一个CSS,请求一个JS,请求一个图片或者说用Ajax请求一些别的资源,那么在页面中发出各种各样的请求,我们把这些请求称之为目标源。当我们页面源和目标源一致(同源)的情况下,就是同源请求,不会发生跨域,当我们页面源和目标源不一致(异源)的情况下,就是异源请求,那就会发生跨域。有的人可能认为只有Ajax请求才会出现跨域,其实不是,请求CSS,请求JS,请求图片什么的都会出现跨域,但是那些跨域不一定带来问题。
看下面三个例子,前两个就是异源请求,第三个是同源请求。
什么是同源策略?
同源策略就是对异源请求进行限制,它不仅仅是针对Ajax请求,而是针对所有的异源请求,它都或多或少的有一些限制,只不过对一些标签发出的跨域请求(比方说link标签请求CSS,script标签请求JS,img标签请求图片,video标签请求视频)限制比较轻微,对Ajax请求限制比较严厉,所以我们一般说跨域问题指的是Ajax请求的跨域问题。
那么是怎么对Ajax请求进行限制的呢?
Ajax发出请求的时候会告诉浏览器去请求服务器,注意,这个时候哪怕是跨了域浏览器也会去发送请求到服务器,然后服务器那边也会正常地进行响应。问题出在哪呢,就在服务器响应的过后,浏览器会对这个响应进行校验,因为浏览器知道这是跨域请求,如果不是跨域请求浏览器就不会进行校验直接给JS。校验会产生两种结果,一种是校验通过,通过以后浏览器也会把响应正常地交给JS,就没有什么问题,所以说跨域不一定会带来问题,校验通过就可以。还有一种就是校验未通过,他就会引发一个错误,这个错误就是平时所说的跨域问题。
所以说跨域问题是发送跨域请求在服务器返回响应的时候浏览器校验未通过而产生的错误。