浅析CORS跨域请求

Cross-Origin Resource Sharing（简称CORS），是W3C制定的网络跨域资源请求的一个“正式”技术。网上相关介绍有很多，但是基本上都停留于理论层面。当你很想知道具体怎么实现一个CORS的时候很难一下子找到靠谱的参考资料。那么这里简单介绍一下前后端CORS的实现机制。

对于前端（JavaScript）而言，做一个CORS和普通ajax请求并没有什么区别（前提是浏览器平台支持CORS）：

 

var xhr=new XMLHttpRequest();
var url="example.com";
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
            //success(JSON.parse(xhr.responseText));
            xhr=null;
        }else{
            //error();
            xhr=null;
        }
    }
};
url=url+"?"+encodeURIComponent("param")+"="+encodeURIComponent("value");
xhr.open("get",url,true);
xhr.setRequestHeader("Content-Type",options.contentType);
xhr.ontimeout=function(){
    //timeout();
    xhr=null;
};
xhr.send(nulll);

 

以上就是一段普通的get请求的JavaScript代码，只要运行这段代码的浏览器支持跨域请求，这个get请求就可以进行跨域通信。

对于后端，配置方法各有差异，具体可以参考以下文章及其引用文章的介绍：

http://blog.csdn.net/andong154564667/article/details/51508042

当完成所有正确的配置之后，对应的前后端就可以进行跨域请求。当一个跨域请求发出时，浏览器会通过引入额外的Origin头信息来指定请求的源，请求将会是一个option类型的请求：

此处我们以恒生电子提供的股票行情公共查询接口OpenApi为例，用本地局域网去请求股市行情数据，Origin:http://localhost:63342

服务端的工作是检查头信息以确定是否接受该请求。如果一个请求被接受，它必须发回一个包含Access-Control-Allow-Origin，其值与发送的源相同的响应头：

Access-Control-Allow-Origin：http://localhost:63342

或者如果你的后端要提供公开服务，则可以配置服务器返回通配符“*”：

Access-Control-Allow-Origin：*

 

 

 

如果请求头中不包含Origin（也许请求来自不支持CORS的浏览器），服务器不会发回任何CORS头信息。

当浏览器接收到服务器的HTTP响应时，它会检查Access-Control-Allow-Origin的值。其值必须同请求头信息中的Origin值完全匹配（或者“*”）。如果头信息缺失或者值不匹配（即服务器限定对特定源的跨域支持），浏览器会禁止该请求。只有当值存在且同Origin匹配，浏览器才会继续处理该请求。

通过跨域验证后，浏览器会再发送一个请求，此时的请求就是真正的请求，而服务器也会相应的返回数据应答。这个时候前后端就表现的像是同源请求一样。

 

因此，一次成功的跨域资源请求将包含两次请求和两次返回，如图：

相关文章：http://write.blog.csdn.net/postedit/53809709

 

熬夜不易，请作者喝杯酒！