title: How to enable CORS in an EmberJS application?
body: <p>I have an EmberJS application that uses ember-data to access data via a REST API. The REST API is running on the same machine but on a different port (although this probably applies to REST API's that are served from another domain.</p>
  
  <p>When I go to the URL <code>localhost:4200/items</code> I get the following error in the Firefox console:</p>
  
  <blockquote>
    <p>Content Security Policy: The page's settings blocked the loading of a resource at <a href="http://localhost:7654/api/items">http://localhost:7654/api/items</a> ("connect-src <a href="http://localhost:4200">http://localhost:4200</a> ws://localhost:35729 ws://0.0.0.0:35729 <a href="http://0.0.0.0:4200">http://0.0.0.0:4200</a>").</p>
  </blockquote>
  
  <p>I tried installing <code>ember-cli-cors</code> but nothing changed. I also tried the solution at <a href="http://discuss.emberjs.com/t/ember-data-and-cors/3690">http://discuss.emberjs.com/t/ember-data-and-cors/3690</a>, but that didn't work either. That discussion was from 2013, so that's not a huge surprise.</p>
  
  <p>The REST API is written in python using Flask and Flask-cors. Using the network tab I can see that the request is being sent, and the data being sent back, but the error is still there. The header <code>Access-Control-Allow-Origin</code> is set to <code>http://localhost:4200</code> in the response, as expected.</p>
  
  <p><strong>app/router.js</strong></p>
  
  <pre><code>import Ember from 'ember';
  import config from './config/environment';
  
  var Router = Ember.Router.extend({
    location: config.locationType
  });
  
  export default Router.map(function() {
    this.route('items');
  });
  </code></pre>
  
  <p><strong>app/adapters/application.js</strong></p>
  
  <pre><code>import DS from 'ember-data';
  
  export default DS.RESTAdapter.extend({
    namespace: 'api',
    host: 'http://localhost:7654',
  });
  </code></pre>
  
  <p><strong>app/routes/items.js</strong></p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Route.extend({
    model: function() {
      return this.store.find('item');
    }
  });
  </code></pre>
  
  <p><strong>app/models/item.js</strong></p>
  
  <pre><code>import DS from 'ember-data';
  
  export default DS.Model.extend({
    name: DS.attr(),
  });
  </code></pre>
  
  <p><strong>app/templates/items.hbs</strong></p>
  
  <pre><code>{{#each item in items}}
    {{ item.name }}&lt;br&gt;
  {{else}}
    &lt;p&gt;No items&lt;/p&gt;
  {{/each}}
  
  {{outlet}}
  </code></pre>