There is no good solution for traditional cross-domain requests, nothing more than jsonp and iframe. With the increasing application of cross-domain requests, W3C provides a standard solution for cross-origin requests ( Cross-Origin Resource Sharing ). IE8, Firefox 3.5 and later versions, Chrome browser, Safari 4, etc. have implemented the Cross-Origin Resource Sharing specification, enabling cross-domain requests.
When the server responds to the client, bring the Access-Control-Allow-Origin header information.
- If Access-Control-Allow-Origin:* is set, scripts from all domains are allowed to access the resource.
- Access-Control-Allow-Origin: http://www.phpddt.com.com, allows specific domain names to access.
For example, PHP adds response header information:
- header("Access-Control-Allow-Origin: *");
Introduction to Cross-Origin Resource Sharing Protocol
Traditional Ajax requests can only obtain resources under the same domain name, but HTML5 breaks this restriction and allows Ajax to initiate cross-domain requests. Browsers can initiate cross-domain requests. For example, you can link images or scripts from an external domain. But Javascript script cannot get the content of these resources, it can only be executed or rendered by the browser.
In Flash and Silverlight, the server needs to create a crossdomain.xml file to allow cross-domain requests. If this file states that "http://your.site" allows requests from "http://my.site", then requests from "http://my.site" can access all "http://your. site" file. This is a site-wide control mode, either you allow a site from a foreign domain or deny it.
COR is not the same, it is a page-level control mode. Each page needs to return an HTTP header named 'Access-Control-Allow-Origin' to allow access to sites from outside domains. You can only expose limited resources and limited access to out-of-domain sites. In the COR model, the responsibility for access control can be placed in the hands of the page developer, not the server administrator. Of course, page developers need to write special processing code to allow access from outside domains.
Another major difference is that a site's crossdomain.xml file is the first to be retrieved and parsed by the browser. If a site from an external domain is not allowed to be accessed, the browser will not issue a cross-domain request at all.
COR is the opposite, Javascript makes a cross-origin request and then checks the 'Access-Control-Allow-Origin' header of the reply. Javascript can read the reply if this header allows access to the foreign domain, otherwise access is forbidden. If the request is not a simple COR, send a pre-check request to the outgoing domain server, if the header of the reply allows access, send a cross-domain request, otherwise prohibit.
The implementation standard of COR is the CORS protocol.
For browsers, COR requests are initiated by Javascript, and there are two types of COR requests:
1. A simple COR request, which can directly initiate a request to external domain resources. It must only contain simple methods and headers, as defined in [2] 6.1.
2. If the COR contains complex methods and headers, it needs to issue a preflight request, which first sends an OPTIONS method to the resource server and includes an "Origin" header request. The reply can control the COR request method, HTTP headers, and authentication information. Only after the request is allowed will the real out-of-domain request be initiated.
Here is a simple COR request:
<script language="Javascript" type="text/javascript">
var client = new XMLHttpRequest();
client.open("GET", "http://bar.org/b")
client.onreadystatechange = function() { /* do something */ }
client.send()
</script>
假设这个请求所在页面的域是“http://foo.org”。 如果来自“http://bar.org/b”的回复包含这样的头：
Access-Control-Allow-Origin: http://foo.org
则表明，它允许来自“http://foo.org”的跨域请求。
下面的Javascript会发出预检验请求和真实请求：
<script language="Javascript" type="text/javascript">
var client = new XMLHttpRequest();
client.open("GET", "http://bar.org/b")
client.setRequestHeader('Content-Type','text/html')
client.onreadystatechange = function() { /* do something */ }
client.send()
</script>
由于“Content-type: text/html”不是一个简单的头，它会先向"http://bar.org/b"发出一个OPTIONS的HTTP请求。 回复可能包含这样的头：
Access-Control-Allow-Origin: http://foo.org
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: GET，PUT, DELETE
Access-Control-Allow-Headers: content-type
"Access-Control-Allow-Origin"表明它允许"http://foo.org"发起跨域请求
"Access-Control-Max-Age"表明在3628800秒内，不需要再发送预检验请求，可以缓存该结果
"Access-Control-Allow-Methods"表明它允许GET、PUT、DELETE的外域请求
"Access-Control-Allow-Headers"表明它允许跨域请求包含content-type头
如果预检验请求获得通过，接下来Javascript就会发起真实的COR请求，过程跟简单的COR请求类似。
CORS协议的实现
现在HTML5的标准如火如荼的在制定和发展中,CORS作为HTML5的一部分，在大部分现代浏览器中有所支持，支持(部分支持)CORS协议的浏览器有IE8+, Firefox5+, Chrome12+, Safari4+
服务端实现
Thinktecture.IdentityModel 这个库已经为我们的WebAPI,MVC的项目做好了支持，具体参看[6]。
参考资料：
[1] http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
[2] http://www.w3.org/TR/cors/
[3]Cross-origin_resource_sharing
[4]跨域资源共享(Cross-Origin Resource Sharing)实现Ajax跨域请求
[6]CORS support in WebAPI, MVC and IIS with Thinktecture.IdentityModel