Ember js Error: Adapter operation failed

Question

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.

I faced the same issue here stackoverflow.com/questions/32670533/…. Unfortunately I dont have solution as of now — Rigel
One thing to note is that 'resources' were deprecated pre 1.13.8 I think. — sheriffderek
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 becomes deprecated after a month. — Raman Kumar Sharma

Raman Kumar Sharma Raman Kumar Sharma · Accepted Answer · 2015-09-26T12:07:14

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?

Ember js Error: Adapter operation failed

1 Answers