关于AJAX/javascript 跨域访问的解决办法及 CORS(Cross-Origin Resource Sharing) 简单介绍

这么多年了， javascript的跨域访问问题终于得到了终极解决，所谓终极，是在浏览器相关的标准里面得到了正式的支持，而不是所谓iframe之类的方法。

而支持这种方案的浏览器必须是 ff 3.5+   safari 4+ 及IE 8 + 即必须是比较新的浏览器。  要支持老的浏览器还得用以前的土方法了。

要知道现在浏览器端相关标准和技术在这几年在飞速发展，不停地升级浏览器也是用户体验最新功能和性能的必要方式。 对前端技术人员来说， 随时跟进最新的浏览器技术也是必须的。

好闲话先不说， 先说说比较靠谱的跨域解决方案就是使用 flash/ajax 桥方式，利用Adobe公司定义的flash跨域标准，即在服务器端定义一个允许文件，  flash读到这个确认文件后就可以执行跨域调用了在很多大网站的根下都有这个文件

例如：
1、新浪博客的crossdomain.xml文件（ http://blog.sina.com.cn/crossdomain.xml）设置了允许所有域名访问；
2、饭否API的crossdomain.xml文件（ http://api.fanfou.com/crossdomain.xml）设置了允许所有域名访问；
3、校内网API的crossdomain.xml文件（ http://api.xiaonei.com/crossdomain.xml）设置了允许所有域名访问；
4、优酷网的crossdomain.xml文件（ http://www.youku.com/crossdomain.xml）设置了允许所有域名访问；
5、土豆网的crossdomain.xml文件（ http://www.tudou.com/crossdomain.xml）设置了允许所有域名访问；

6、逍遥视频的crossdomain.xml文件（ http://v.xoyo.com/crossdomain.xml）设置了只允许*.xoyo.com域名访问；
7、网易的crossdomain.xml文件（ http://www.163.com/crossdomain.xml）设置了只允许tech.163.com、sports.163.com等几个域名访问。


这个做法不错， 但首先adobe这么做也是无奈之举， 因为实在无标准可循。  不过到了2009年 W3C的CORS标准草案(http://www.w3.org/TR/access-control/#access-control-allow-origin-response-hea)的发布及各大浏览器的支持， CORS将会成为主要的解决方案

在没有CORS之前， 浏览器要发出跨域的请求时必须要得到被请求域的许可，而许可必须要以大家公认的方式，否则就被认为是不安全的。    那么CORS就定义了许可方式
它定义了 8个头信息来表示许可形式
分别是

浏览器请求时，
必须带上 Origin及Access-Control-Request-Method头信息(这些信息浏览器自动加的)。
分别表示来源网站及要使用的http方法， 

当然这个请求一般是一个http Options方法。
例如：

OPTIONS  http://incubator.vicp.net/p/liuhan

Host: incubator.vicp.net
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Origin: http://www.google.cn
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with


接下来关键来了， 服务器要在相应头里给予许可
即通过 Access-Control-Allow-Origin 头 表示允许的网站。 Access-Control-Allow-Methods 表示允许的方法

例如  响应

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://arunranga.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER
Access-Control-Max-Age: 1728000

浏览器拿到这些响应信息就可以发出正常的调用了。


最后一点， 大多数情况下，这个调用必须带着cookie，服务器响应头中要增加Access-Control-Allow-Credentials 信息以允许其他信息的携带。

 

https://developer.mozilla.org/en/HTTP_access_control