使用CORS 实现Ajax的另类跨域

自从HTML5利用CORS实现了跨域资源共享之后，无论是POST方式还是GET方式，我们都可以用ajax来跨域访问资源，但是我们要怎么用CORS，请看故事背景。

 

故事背景：我们有一个PC网站ycg.qq.com（以下称为网站A），现在想急切开发一个移动端网站m.ycg.qq.com（称为网站B），静态稿跟前端已经完成，在不改原来服务器接口的前提下，网站B去网站A请求数据，这个时候，我们发现网站B只提供了json格式的接口，并不支持jsonp。

 

这让我们陷入了一个窘境，传统的ajax请求是不能跨域访问的，浏览器报XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin错误，如果改用jsonp，服务器端返回的是json，没有callback函数，浏览器报错，无法执行，所以如果需要服务器端支持jsonp方式访问接口的话未免太大的工作量。

 

在后台哥哥实在是太忙，妹子已经写好静态稿跟前端，网站又急于上线的情况下，Cross-Origin Resource Sharing（简称CORS）登场了，CORS是W3C为了解决跨域通信问题，新增的一个标准，在大部分现代浏览器中有所支持，支持(部分支持)CORS协议的浏览器有IE8+, Firefox5+, Chrome12+, Safari4+，移动端几乎全支持。这里盗个图：

 



 

至于CORS怎么用呢，下面我们说说使用实例。

一、服务器端，以Apache为例，在httpd.conf中，<VirtualHost>中增加以下两行


第一条配置的含义是域m.ycg.qq.com发起的请求可以获取当前服务器数据，第二条是允许请求带有验证信息（类似cookie）。

 

注意：如果服务端不设置响应头，响应会被忽略不可用；同时，服务端需指定一个域名（Access-Control-Allow-Origin:www.zawaliang.com），而不能使用泛型（Access-Control-Allow-Origin: *）泛型不安全并且会导致浏览器报错。

 

二、关于浏览器端，以jquery为例，我们需要在ajax请求中加一个参数xhrFields，并设置为withCredentials : true。



默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求，会用下面的HTTP头部来响应。

 



其实就是我们刚才设置的第二条配置。

虽然设置了widthCredentials为true的请求中会包含远程域的所有cookie，但这些cookie仍然遵循同源策略，所以外域是访问不了这些cookie的，现在我们就可以安全地跨域访问啦。