Ember-Data and CORS

Ember Data
2

Howdy Andrew.

Ember-Data has no special support for CORS, but since Ember-Data is composed of flexible primitives adding support to your application should be simple. For instance adding CORS support to a single endpoint is pretty easy:

App.ThingAdapter = DS.RESTAdapter.extend({
  findAll: function(store, type, id) {
    return this.ajax("https://cors-test.appspot.com/test", "GET", {
      // CORS
      crossDomain: true,
      xhrFields: {withCredentials: true}
    }).then(function(json) {
      // Massage this demo API endpoint to look like RESTAdapter expects.
      return { things: [json] };
    });
  }
});

A fiddle: http://emberjs.jsbin.com/osULomo/2/edit?html,js,output

The ajax method called above is just a promise-returning wrapper around jQuery’s XHR. You could also add CORS and a custom host to all models:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: 'https://otherhost.com',
  ajax: function(url, method, hash) {
    hash.crossDomain = true;
    hash.xhrFields = {withCredentials: true};
    return this._super(url, method, hash);
  }
});

Again, a demo: http://emberjs.jsbin.com/osULomo/3/edit?html,js,output

Ember-Data is currently best viewed (imo, and hopefully not forever), as a great set of primitives. All the extension points for something like CORS are present, if a little under-documented.

Of course, I personally use an ajaxPrefilter call to handle this in several apps which is yet another way to tackle CORS. There really are plenty of options, and just because you use Ember-Data doesn’t mean you need to ignore jQuery APIs.

6 Likes