0

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?

Desperately... Felix

GeorgieF
  • 2,687
  • 5
  • 29
  • 43
  • For IE8/9, you can only use the proprietary `XDomainRequest` object http://msdn.microsoft.com/en-us/library/cc288060%28VS.85%29.aspx to do a CORS request. There's a few suggestions on workarounds here: http://stackoverflow.com/questions/8521743/backbone-js-wont-sync-in-ie-only – WiredPrairie Apr 17 '13 at 18:33
  • Thx WiredPrairie. Quote: `XDomainRequest offers only a subset of XMLHTTPRequest's features. For example, it is impossible to insert any custom headers to the HTTP-Get/Post requests,` ... makes it a dead end, cause I authenticate via a token that is transmitted in a HTTP header. Seems the only options are JSONP or delivering the app from the same subdomain as the API. – GeorgieF Apr 17 '13 at 19:44
  • Yes, that's what I was thinking -- and JSONP only works for GETs which may be too limiting for your needs. – WiredPrairie Apr 17 '13 at 19:46

2 Answers2

0

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.

Alex Mcp
  • 19,037
  • 12
  • 60
  • 93
  • Alex, thx for the hint, my Rails driven API does not get along with the JSONP request. It sends back some HTML error page. Am I right, that JSONP is my only chance to get CORS requests running in IE8? If yes, I am screwed. – GeorgieF Apr 17 '13 at 17:08
  • Well, fixing the error is possible; what is rails yelping about? – Alex Mcp Apr 17 '13 at 17:46
  • The parameter parsing fails. The jQuery callback paramter is split into two, cause it includes a `=`. In addition - or as a result - the token based authentication fails, so that the request is redirected to the the devise login page, which in turn explains the returning HTML. I have no experience regarding JSONP, so I have no clue, what my API has to respond to a JSONP request. – GeorgieF Apr 17 '13 at 19:41
  • Addition: As WiredPrairie mentions above, JSONP work only for GET requests. So this option is out of the race as well. Seems my only choice is to make the API available under the same domain name as the app. – GeorgieF Apr 17 '13 at 19:54
0

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

https://github.com/victorquinn/Backbone.CrossDomain

Just include that library after Backbone.js and your CORS requests on IE should magically work.

Victor Quinn
  • 1,107
  • 9
  • 12