Ember RESTAdapter does not stretch the server

Question

I am writing my first Ember application and at this moment, I am trying to use JSON from my API (made in Rails with Rabl), but RESTAdapater does not work. It does not even reach my server! I got this code:

application / adapters / application.js

import DS from 'ember-data'; export default DS.RESTAdapter.extend({ host: 'localhost:3000', namespace: 'api' }); 

application / 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') }); 

application / 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); } }); 

Any idea? I think everything is set up correctly.

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

I'm going to guess that you are using ember-cli, which comes with a supply of content-security-policy these days.

If you edit config/environment.js to enable this resource, everything should work fine. For this:

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

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

If you cannot find it, create it. Then change the value of the connect-src key to enable http://localhost:3000/* . Using the example above, your new file should look something like this:

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

Ember-cli talks about this in more detail (and much better) right here on his website.

Answer 2

Yes, ember-cli comes with the content-security-policy add -on created these days.

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

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