Ember.js ember-data restadapter fail to load json

Question

Cheers! I have ember-data store:

TravelClient.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.RESTAdapter.create({ bulkCommit: false, url: \"http://         


        

Answer 1

The RESTAdapter expects JSON that is not the problem but the page and the json are not on the same domain, this is a security issue. You can resolve this by using one of the two solutions named below.

You're running into the same origin policy you should either use JSONP or CORS. The quickest fix would probably be to tell ember-data that you want to use JSONP.

For CORS your server needs to respond to an OPTIONS request with the headers:

• Access-Control-Allow-Origin
• Access-Control-Request-Method

i'm no rails expert but you will probably need to do something with the gem rack-cors see here or here.

You could do that by overriding the ajax hook in the RESTAdapter like so:

App.store = DS.Store.create({
    revision: 11,
    adapter: DS.RESTAdapter.create({
        namespace: "data",
        url: "",
        ajax: function (url, type, hash) {
            hash.url = url;
            hash.type = type;
            hash.dataType = 'jsonp';
            hash.contentType = 'application/json; charset=utf-8';
            hash.context = this;

            if (hash.data && type !== 'GET') {
                hash.data = JSON.stringify(hash.data);
            }

            jQuery.ajax(hash);
        },
    })
});

Answer 2

I have a simple work around in Rails (that is working for me so far.) It is untidy as is, but can easily be tightened up with logic in the controllers.

In routes.rb:

match   ':path' => 'authentications#allow', constraints: {method: 'OPTIONS'}

Which simply returns status OK to any OPTIONS request.

def allow
  head :ok
end

And then in application_controller.rb set the Cross-origin resource sharing (CORS) headers for every request:

before_filter :cors
def cors
  response.headers.merge! 'Access-Control-Allow-Origin' => '*', 'Access-Control-Allow-Methods' => 'POST, PUT, GET, DELETE', 'Access-Control-Allow-Headers' => 'Origin, Accept, Content-Type'
end

Answer 3

If you are looking to use JSONP it's much easier to override the private ajaxOptions function instead of using jQuery and overriding the ajax method. Ember's pipeline includes the removal of the jQuery dependency. So do this instead:

adapters/application.js:

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
    ajaxOptions: function(url, type, options) {
        var hash = this._super(url, type, options);
        hash.dataType = "jsonp";
        return hash;
    }
});

It would be create if the Ember core team could expose a public method to officially support this (instead of hacking a private api).

https://github.com/emberjs/data/blob/1.0.0-beta.15/packages/ember-data/lib/adapters/rest_adapter.js#L915