COR blimey, what’s this all about?
The problem with JSONP is that it feels like a hack, a hole in HTML that has been exploited to enable the cross domain retrieval. A side effect of this is that JSONP only supports GET HTTP requests.
There is however, an alternative that supports all HTTP request types, this is called Cross-Origin Resource Sharing (CORS).
First off, I should make it clear that CORS fits into the category ‘kinda supported in most modern browsers‘. Forget it if you’re using anything below Internet Explorer(IE) 8, and also there is currently no support in Opera.
How it works
From a client perspective, CORS is implemented in the XmlHttpRequest API (or XDomainRequest if you’re using IE). For a CORS request an extra setting called Origin is added to the request headers, this is set to the domain of the web site that is making the request (see screenshot below for an example).
In order to allow CORS requests, the external domain server must have CORS enabled (see this site for details). When this is active response headers will include the setting Access-Control-Allow-Origin (see screenshot below), which is used to specify which domains the response can be sent to – this setting is usually set to * (every domain).
CORS in jQuery.ajax()
Standard CORS (XmlHttpRequest browsers) is supported jQuery.ajax(), however the IE XDomainRequest variety is currently not. There is a jQuery extension called jQuery.iecors that wraps the existing $.ajax() call and handles IE style CORS.
Lessons learned from using CORS
- Be aware that it is NOT implemented in all browsers.
- If you’re resource provider has not enabled CORS you cannot use it.
- Ensure that you deal with IE’s different implementation.