Ember js Error: Adapter operation failed

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://ift.tt/1NQykHd'
});

app/templates/categories/index.hbs

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

Now when I visit http://ift.tt/1NQykHd 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.