使用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+，移动端几乎全支持。

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

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