Missing options request using ember-data

Question

I'm trying to get to grips with ember and ember data but having a problem with handling CORS correctly.

I've managed to define a model etc using a static fixture but now want to use some remote JSON. So I setup ember-data like this:

App = Ember.Application.create();

App.Store = DS.Store.extend({
    revision: 13,
    adapter: DS.RESTAdapter.create({
        url: 'http://clara.eagle/v1/money'
    })
});

A model like this:

App.Transaction = DS.Model.extend({
    type:       DS.attr('string'),
    occurrence: DS.attr('date'),
    details:    DS.attr('string'),
    amount:     DS.attr('number'),
    currency:   DS.attr('string') 
});

And a route like this:

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return App.Transaction.find();
    }
});

As a backend I have an existing API that will return JSON for a valid GET request the following CORS headers an OPTIONS request.

Access-Control-Allow-Origin: http://ember.eagle
Access-Control-Allow-Headers: X-Requested-With, X-AUTHENTICATION, X-IP
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

(ember.eagle is the ember app domain, clara.eagle is the api domain).

When I run the app however chrome tells me:

XMLHttpRequest cannot load http://clara.eagle/v1/money/transactions. Origin http://ember.eagle is not allowed by Access-Control-Allow-Origin.

So I looked at the network tab to see what result the OPTIONS request gave, except I could find one. Whilst this explains why the API request was failing I don't know why the OPTIONS request isn't being executed, since its ultimately making the request using jQuery (as I understand it).

My question therefore is why is this OPTIONS request not being generated? and if it's not designed to then how do I make it do so?

I have tested that the OPTIONS request is generated by the API, and that the GET request also works so I don't believe the API is at fault (screenshot). Using a jQuery on its own (i.e. vanilla jQuery) the OPTIONS request is run as expected.

I am new to Ember os there's probably something i'm missing but at the moment I can't see it!

did you notice your URL to the API is `http://clara.eagle` and your backend setup points to `http://ember.eagle`? — intuitivepixel, Aug 17 '13 at 12:13
@intuitivepixel Sorry what do you mean? ember.eagle makes a request to clara.eagle - clara.eagle marks ember.eagle as an allowed origin. — fenfe1, Aug 17 '13 at 12:21

score 1 · Answer 1 · answered Aug 17 '13 at 16:16

You could try this two changes:

App.Store = DS.Store.extend({
  revision: 13,
  adapter: DS.RESTAdapter.create({
    url: 'http://clara.eagle/v1/money',
    corsWithCredentials: true
  })
});

And additionally add this to your server configuration Access-Control-Allow-Credentials: true this goes in conjunction with the corsWithCredentials option for the ajax setup:

Access-Control-Allow-Origin: http://ember.eagle
Access-Control-Allow-Headers: X-Requested-With, X-AUTHENTICATION, X-IP
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

Hope it helps.

score 0 · Answer 2 · answered Aug 18 '13 at 17:29

In the client side:

Ember.$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-IP', 'some value');
    }
});

or

Ember.$.ajaxSetup({
    headers: { 'X-IP': 'some value' }
});

In the server side, responding to a options method:

Access-Control-Allow-Origin: http://ember.eagle
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, X-Prototype-Version, X-IP
Access-Control-Max-Age: 1728000

Missing options request using ember-data

2 Answers2

Linked