Backbone.js Won't Make Cross-host Requests?

I've been playing with Backbone in my Chrome console and running into a cross-domain problem that I can't figure out. The host I'm connecting to presumably correctly implements COR

Solution 1:

I hope one of these helps (I didn't try yet):
1. Overriding Backbone.js sync to allow Cross Origin

(function() {
  var proxiedSync = Backbone.sync;
  Backbone.sync = function(method, model, options) {
    options || (options = {});
    if (!options.crossDomain) {
      options.crossDomain = true;
    }
    if (!options.xhrFields) {
      options.xhrFields = {withCredentials:true};
    }
    return proxiedSync(method, model, options);
  };
})();

2. Cross domain CORS support for backbone.js

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    options.crossDomain ={
        crossDomain: true
    };
    options.xhrFields = {
        withCredentials: true
    };
});

Solution 2:

hey you can use something like:

 var PostsCollection = Backbone.Collection.extend({
   initialize: function(models, options) {
     //this.id = options.id;
   },
   url: 'http://myapi/api/get_posts/?count=8',
 });

 posts = new PostsCollection();
 posts.fetch({
   dataType: 'jsonp',
   success : function (data) {
     console.log(data);
   }
 });

the key is we need to use 'jsonp'

Solution 3:

It turns out the URLs I was requesting with Backbone were slightly different than those requested via the XHR (they were missing a queryarg). This caused the server to 500, which doesn't have the CORS headers. Chrome didn't show the HTTP request at all in the network tab of the debug panel, so I was extremely confused.

Fixing the 500 on the server made this work again.