使用 CORS 实现 Ajax 的另类跨域

Question

自从 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 的，现在我们就可以安全地跨域访问了。