Fuck me on GayHub

CORS 跨域资源共享

本文将对CORS – Cross Origin Resource Sharing即跨域资源共享做简单的阐述。你将了解到CORS的基本情况以及与其相关的一些知识。

作为开发人员,一般情况下不会接触到CORS,因为大多数情况下,你只要后台写好API,前台通过AJAX异步访问即可。可是有的时候,前台页面要展示的数据并不是来自当前域后台,而是由其它域的后台提供。这个时候要想获取其它域的后台数据,就必须使用CORS技术了。

What is CORS

CORS只是一种标准,一种规定了客户端,服务器如何通信的机制,不同的服务器实现不同,不同的客户端实现亦不相同。

要讲CORS,则必须理解XMLHttpRequest, JavaScript, DHTML等技术。

JavaScript开始叫做LiveScript,因为当时是Netscape公司和Sun公司合作开发,目标是开发一种可以在浏览器中执行的语言,高级程序员 Brendan Eich只有10天左右的时间,匆匆之下完成了编译器,语言规范的设计实现,但是后来他自己也承认了JavaScript是有很多地方不完美。又因为当时Java语言正风起云涌,所以为了避免误解重名,他将其命名为LiveScript,且LiveScript首先在火狐类浏览器中运行。至于后来为什么更名为JavaScript,这我也不知道了。

DHTML则是一种动态网页技术,其中的D代表Dynamic的意思。有了DHTML,我们就可以动态的修改HTML中的内容。这也就是我们经常能使用JavaScript动态修改网页内容的根本原因了。

XMLHttpRequest, 其实是一种在浏览器端实现的可以做Http请求的技术。具体由浏览器实现,暴露给我们的则是简单易用的API。令我惊讶的是,XMLHttpRequest最开始是在微软的Internet Explore5项目中实现的。其实,如果你使用过XMLHttpRequest,你会疑问这个和XML有什么关系?uh,应该是没有直接的关系,只是由于Alex Hopmann开发出这个技术的时候,将其放入到了Internet Explore5项目中的MSXML库中才命名为如此的缘故。可见微软是个多么随便的公司,正好也验证了其一团糟的软件产品。

好了,上面说了这么多,还是没有到CORS的故事。因为有了XMLHttpRequest的技术,所以我们可以在网页中使用JavaScript访问其它网络资源。但是在客户端与服务器交互的过程中,会产生cookies等涉及安全的东西,若不加限制,XMLHttpRequest则会引起安全漏洞。所以默认的XMLHttpRequest是使用同源机制的,只有在同一个域名中,XMLHttpRequest才能访问成功。若example.com中的XMLHttpRequest要访问foo.com中的资源,则会失败。

但是有时候,我们确实需要在一个域名中通过XMLHttpRequest访问另一个域名的资源。所以就有了CORS技术。一般情况下,各个浏览器实现XMLHttpRequest的时候已经支持了CORS功能,所以只要在服务端开启CORS,即可以跨域资源共享了。

要开通CORS,服务器端的HTTP头部只需要添加Access-Control-Allow-Origin: example.com即可。客户端在请求是头部添加Origin: http://example.com即可。下面是一个CORS请求的头部信息:

1
2
3
4
5
6
7
8
9
10
请求
GET /resource.js HTTP/1.1
Host: thirdparty.com
'Origin: http://example.com'
...

返回
HTTP/1.1 200 OK
'Access-Control-Allow-Origin: http://example.com'
...

参考文献

Cross-origin resource sharing

HTTP access control (CORS)

High Performance Browser Networking

A Short History of JavaScript