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://someIP:somePORT"})
});

And router:

TravelClient.ToursRoute = Ember.Route.extend({
  model: function() {
    return TravelClient.Tour.find();
  }
});

I recieve this JSON from remote server:

{
  "tours": [
    {
      "id": "5110e8b5a8fefe71e0000197",
      "title": "qui deserunt dolores",
      "description": "Id velit nihil.",
      "seats": 12,
      "options": [

      ],
      "images": [
        {
          "id": "5110e8b5a8fefe71e0000196",
          "url": "url"
        }
}

But when I try to return TravelClient.Tour.find() it fails with:

http://someIP:somePORT/tours 404 (Not Found)

XMLHttpRequest cannot load http://someIP:somePORT/tours. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

IT seems like RESTAdapter doesn't know, that it must receive JSON or what?

UPDATE:

In the application controller on the rails server-side:

def set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Request-Method'] = '*'
end

But it's still :

OPTIONS http://someIP:somePORT/tours 404 (Not Found)

And it looks like RESTAdapter tries to load tours resource, not tours.json:

Request URL:http://someIP:somePORT/tours

WORKING SOLUTION

Extend RESTAdapter:

TravelClient.CUSTOMAdapter = DS.RESTAdapter.extend({
  bulkCommit: false, 
  url: "http://remote_server_address",    
  buildURL: function(record, suffix) {
    var s = this._super(record, suffix);
    return s + ".json";
  }
})

and respond to an OPTIONS request with right headers

the headers you set are returned with the `GET` request you need to return them with an `OPTIONS` request — albertjan, Feb 12 '13 at 09:46
Rack CORS gem did the trick, thanks. I think it's doing all that stuff with OPTIONS requests just "out of the box". — xamenrax, Feb 12 '13 at 11:03
Heres the link for the next visitor https://github.com/cyu/rack-cors ftw — genkilabs, Aug 30 '13 at 20:54

albertjan · Accepted Answer · 2013-02-12T09:21:07.127

10

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);
        },
    })
});

edited Feb 12 '13 at 09:21

answered Feb 12 '13 at 08:47

albertjan

7,739
6
44
74

To use CORS I just need to add smth like `Access-Control-Allow-Origin: *` to server's response header? – xamenrax Feb 12 '13 at 08:55
yes see here: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing and here: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS There are some other headers you can control more specifically what is allowed. – albertjan Feb 12 '13 at 08:58
Rack CORS gem is just for more specific customization - not what I need at the moment, but thank you for attention. – xamenrax Feb 12 '13 at 09:29
You need to respond to a OPTIONS request with the headers somehow. – albertjan Feb 12 '13 at 09:40
but my server responding to an OPTIONS request, I have right headers in response. – xamenrax Feb 12 '13 at 09:46
it isn't otherwise you wouldn't get a 404 :) – albertjan Feb 12 '13 at 09:48

score 1 · Answer 2 · answered Jun 05 '13 at 13:33

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

But there was nothing wrong with my headers, just Rails was giving me back html, while I was needing json. So workaround just is saying to Rails directly that you want json - extend adapter's buildURL method. Sorry for my English. — xamenrax, Jun 12 '13 at 13:03

Jamie Chong · Answer 3 · 2015-02-22T21:45:04.183

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

Ember.js ember-data restadapter fail to load json

3 Answers3

Linked