Ember RESTAdapter don't reach out the server

Question

I'm writing my first Ember app and this moment, I'm trying to consume JSON from my API (made in Rails with Rabl), but the RESTAdapater is not working. It doesn't even reach out my server! I got this code:

app/adapters/application.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'localhost:3000',
  namespace: 'api'
});

app/models/player.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  heightFormatted: DS.attr('string'),
  heightCm: DS.attr('number'),
  weightLb: DS.attr('number'),
  weightKg: DS.attr('string'),
  birthplace: DS.attr('string'),
  birthdate: DS.attr('string'),
  neoId: DS.attr('number'),
  position: DS.attr('string'),
  number: DS.attr('string')
});

app/routes/player/index.js

import Ember from 'ember';

export default Ember.Route.extend({
   model: function() {
    return this.store.find('player');
  }
});

app/routes/players.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('player', params.player_id);
  }
});

Anyone idea? I think I have set up all properly.

Console.log

[Report Only] Refused to connect to 'http://localhost:3000/api/players' because it violates the following Content Security Policy directive: "connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729".

Answer 1

Yes ember-cli does come with the content-security-policy add-on built in these days.

To ensure that you can connect to your api when you are in development mode, add this snippet below to the following file config/environment.js and change your port number accordingly.

ENV.contentSecurityPolicy = { 'connect-src': "'self' http://localhost:3000" }

Answer 2

I'm going to guess you're using ember-cli which comes stock with a content-security-policy addon these days.

If you edit the config/environment.js to allow for this resource things should work fine. To do this:

Somewhere in that code before return ENV; you should find a line starting with ENV.contentSecurityPolicy = {. Find that line and inside you should find something like:

ENV.contentSecurityPolicy = {
    'connect-src': "'self'",
    'style-src': "'self'",
    'script-src': "'self'",
    'img-src': "'self'"
}

If you can't find it, create it. Then change the value of the connect-src key from to also include http://localhost:3000/*. Using the example above your new file should look something like:

ENV.contentSecurityPolicy = {
    'connect-src': "'self' http://localhost:3000/*",
    ...
}

Ember-cli speaks to this in greater (and far better) detail directly here on their site.