Why does my Backbone 1.0.0 fail to load data cross domain from CORS enabled server in IE8 only
I built a Backbone 1.0.0 app that is served from a domain: beta.mydomain.com. This app fetches data from a JSON-only API available via api.mydomain.com.
Since this causes the browsers cross domain policy to come into play, I completely opened up my API server for CORS requests. The response headers for every request include:
HTTP/1.1 200 OK Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS, DELETE
Which seems to be enough for all browsers I tested so far. But it fails in IE8 with a 'Transport Error'.
Next step: JSONP. When I extend sync and set options.dataType = "jsonp" I get an error in all browsers that states:
Uncaught SyntaxError: Unexpected token <
where I do not find out, where it comes from. Is there any chance to make CORS requests work in IE8, or is there any way to 'simply' enable JSONP so that my Backbone app works in IE8 as well?
The Unexpected token < is usually indicative of HTML being returned where you don't expect it. Usually an error page in cases like this, because JSONP is expecting a small script payload to execute/eval.
You can check the content of the HTTP response in your Network tab in Chrome Dev tools or in Firebug. You could also watch the server logs if you have access to the server that's returning (or not returning) your JSON or HTML.
Backbone.js uses $.ajax in the background which itself uses the XMLHttpRequest object which IE8 does not support for cross domain requests.
So, you must use the XDomainRequest object which is very similar to XMLHttpRequest but for IE and cross domain requests.
I ran into this exact issue myself though, and wrote a library which is a drop-in replacement for Backbone's sync which automatically handles all of the XDomainRequest stuff in the background so the rest of your code need not change to work with IE7/8/9
Just include that library after Backbone.js and your CORS requests on IE should magically work.