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.

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?