As a beginner to Ember.js I tried fetching some data from my Rails Api server to Ember App. My Ember App is trying to get and show the categories name served from the rails api. I am using

• Ember version: 1.13.8
• node: 0.12.7
• npm: 2.13.4

app/router.js

Router.map(function() {
  this.resource('categories',function(){
    this.resource('category',{path: '/:category_id'});
  });
});

routes/categories/index.js

export default Ember.Route.extend({
 model() {
    return this.store.findAll('category')
  }
});

app/models/category.js

export default DS.Model.extend({
    name: DS.attr('string')
});

app/adapters/application.js

export default DS.JSONAPIAdapter.extend({
   shouldReloadAll: function() { return true; },
   namespace: 'v1',
   host: ''
});

app/templates/categories/index.hbs

<ul>
    {{#each model as |category|}}
       <li>{{category.name}}</li>
    {{/each}}
 </ul>

Now when I visit in my browser I get response

{"categories":[{"id":1,"name":"Entertainment"}, {"id":2,"name":"Education"}]}

but when I visit /categories in my ember app i.e. http://localhost:4200/categories Noting is displayed in browser and I get error in ember inspector

routeName: "categories.index_error"
context: Error: Adapter operation failed
currentModel: Error: Adapter operation failed

Also the ember server console reflects error

Content Security Policy violation: {}

I also tried changing JSONAPIAdapter to RESTAdapter but it gave deprecation error. Please help me understand the problem.

As a beginner to Ember.js I tried fetching some data from my Rails Api server to Ember App. My Ember App is trying to get and show the categories name served from the rails api. I am using

• Ember version: 1.13.8
• node: 0.12.7
• npm: 2.13.4

app/router.js

Router.map(function() {
  this.resource('categories',function(){
    this.resource('category',{path: '/:category_id'});
  });
});

routes/categories/index.js

export default Ember.Route.extend({
 model() {
    return this.store.findAll('category')
  }
});

app/models/category.js

export default DS.Model.extend({
    name: DS.attr('string')
});

app/adapters/application.js

export default DS.JSONAPIAdapter.extend({
   shouldReloadAll: function() { return true; },
   namespace: 'v1',
   host: 'http://ip.address-to_rails_api'
});

app/templates/categories/index.hbs

<ul>
    {{#each model as |category|}}
       <li>{{category.name}}</li>
    {{/each}}
 </ul>

Now when I visit http://ip.address-to_rails_api in my browser I get response

{"categories":[{"id":1,"name":"Entertainment"}, {"id":2,"name":"Education"}]}

but when I visit /categories in my ember app i.e. http://localhost:4200/categories Noting is displayed in browser and I get error in ember inspector

routeName: "categories.index_error"
context: Error: Adapter operation failed
currentModel: Error: Adapter operation failed

Also the ember server console reflects error

Content Security Policy violation: {}

I also tried changing JSONAPIAdapter to RESTAdapter but it gave deprecation error. Please help me understand the problem.

• javascript
• ruby-on-rails
• ember.js
• ember-data
• ember-cli

• I faced the same issue here stackoverflow./questions/32670533/…. Unfortunately I dont have solution as of now – Rigel Commented Sep 25, 2015 at 17:56
• One thing to note is that 'resources' were deprecated pre 1.13.8 I think. – sheriffderek Commented Sep 26, 2015 at 16:27
• yeah I changed resources to routes, but the problem was something else. The major problems caused in ember are due to exponential changes in code. They are changing it at very fast rate, so every thing bees deprecated after a month. – Raman Kumar Sharma Commented Sep 28, 2015 at 11:09

1 Answer 1

Finally resolved the issue The problem was on both parts Rails API as well as Ember App

First Error

Content Security Policy violation: {}

was removed by adding content security policy to ember app config/environment.js

contentSecurityPolicy: {
  'default-src': "'none'",
  'font-src': "'self'",
  'img-src': "'self'",
  'media-src': "'self'",
  'style-src': "'self' 'unsafe-inline'",
  'script-src': "'self' 'unsafe-eval' http://ip_to_rails_api",
  'connect-src': "'self' ws://ip_to_rails_api"
}

Then I got an error

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 404.

This error was resolved by using Cross Origin Resource Sharing or CORS on rails api end. SO that for each request the browser sends an OPTIONS request first and the server returns a response with some extra headers. The browser is then able to make the original request.

For more on CORS refer How does Access-Control-Allow-Origin header work?