首页 > 代码库 > 域知识(一)——CORS

域知识(一)——CORS

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

    它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

    浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

   一,简单请求

     对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。

    下面是一个简单的请求:

 1 <h1>绕过浏览器禁止跨域请求的方案——CORS</h1>
 2   <button id="bt1">请求数据</button>
 3   <script src="http://www.mamicode.com/jquery-1.11.3.js"></script>
 4   <script>
 5     $(‘#bt1‘).click(function(){
 6       $.ajax({
 7         url:‘http://localhost/crossdomain/2.php‘,//跨域资源
 8         type:‘get‘,
 9         success: function(result){
10           console.log(‘成功获取到服务器返回的数据‘)
11           console.log(result);
12         }
13       });
14     })
15   </script>

技术分享

 

请求发送之后,浏览器发现这次跨源AJAX请求是简单请求,就自动在头信息之中,添加一个Origin字段。

技术分享

       如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。这个回应的头信息

没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequest

onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。

技术分享

报错的情况如下:

技术分享

如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

技术分享

在这里:Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

二、非简单请求

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者Content-Type字段的类型是application/json

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式

XMLHttpRequest请求,否则就报错。

以下是JS脚本:

技术分享

发送put请求,浏览器发现,这是一个非简单请求,就自动发出一个"预检"请求,要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。

技术分享

"预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。

除了Origin字段,"预检"请求的头信息包括两个特殊字段。

(1)Access-Control-Request-Method

该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT

(2)Access-Control-Request-Headers

该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段。

2.1预检请求的回应

服务器收到"预检"请求以后,检查了OriginAccess-Control-Request-MethodAccess-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。

如果浏览器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

技术分享

同时,浏览器会只返回一个预检请求的php文件:

技术分享

 

这个时候,需要在服务器端添加方法:

技术分享

在响应头中的消息如下:

技术分享

 

在这里,跨域请求成功。其中的方法:

(1)Access-Control-Allow-Methods

该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求

 2.2、浏览器的正常请求和回应

一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。

服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。

 

 

 

 

 

 

 

 

 

域知识(一)——CORS