CODEWITHSUNDEEP
ember.jsember-datacors
fenfe1
fenfe1

Reputation: 71

Missing options request using ember-data

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!

Upvotes: 1

Views: 3684

Answers (2)

Marcio Junior
Marcio Junior

Reputation: 19128

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

Upvotes: 0

intuitivepixel
intuitivepixel

Reputation: 23322

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.

Upvotes: 1

Related Questions