title: production build of ember app works, but when using ember serve, cookies not sent to api
body: <p>I have a rest API running on <code>localhost:8001/my_app/api/</code>, and I have apache setup to reverse proxy it from <code>localhost/my_app/api</code>. That's working fine.</p>
  <p>In order to have permissions to do anything with the api, it requires my session cookie, my <code>csrftoken</code> cookie <strong>and</strong> a <code>X-CSRFToken</code> HTTP header. I've configured <code>adapters/application.js</code> as follows:</p>
  <h1>adapters/application.js</h1>
  <pre><code>import Ember from 'ember';
  import DRFAdapter from './drf';
  
  export default DRFAdapter.extend({
     
     headers: Ember.computed(function() {
      return {
        'X-CSRFToken': Ember.get(document.cookie.match(/csrftoken\=([^;]*)/), '1'),
        };
      }).volatile(),
  
     ajax: function(url, method, hash) {
         hash = hash || {}; // hash may be undefined
         hash.crossDomain = true;
         hash.xhrFields = {withCredentials: true};
         return this._super(url, method, hash);
     }
  });
  </code></pre>
  <p>If I do a <code>ember build -prod</code> and copy the contents of the <code>dist</code> dir to  <code>/var/www/myApp/</code>, apache serves my app, and it works just fine.</p>
  <p>It's when I try to use ember-cli's builtin development server where I run into problems.  I'm getting 403 errors from my api.  It turns out that while the <code>X-CSRFToken</code> header is being sent <em>neither</em> of my cookies are.  If I look in my chrome developer tools, it shows that I have both cookies - they simply aren't in the request headers.  They're both from localhost, so I'm a bit confused.</p>
  <p>Also, I currently I have CORS on my rest backend setup. Here are the headers I'm currently receiving:</p>
  <pre><code>Access-Control-Allow-Credentials: true
  Access-Control-Allow-Origin: http://localhost:4200
  </code></pre>
  <p>I thought that since <code>allow-credentials == true</code> and <code>allow-origin != *</code> that cookies were supposed to be allowed. sigh.</p>
  <p>Here's my API_HOST and contentSecurityPolicy:</p>
  <h1>config/environment.js</h1>
  <pre><code>if (environment === 'development') {
      ENV.APP.LOG_TRANSITIONS = true;
      ENV.APP.API_HOST = &quot;http://localhost&quot;
      ENV.contentSecurityPolicy = {
        'default-src': &quot;'none'&quot;,
        'script-src': &quot;'self' 'unsafe-eval' localhost&quot;,
        'font-src': &quot;'self'&quot;,
        'connect-src': &quot;'self' localhost&quot;,
        'img-src': &quot;'self'&quot;,
        'style-src': &quot;'self'&quot;,
        'media-src': &quot;'self'&quot;
     };
   }
  </code></pre>
  <p>As you can see above, the api requests are being sent through my reverse proxy.  I've played around with <code>ember serve --proxy</code> trying both <code>http://localhost:80/</code> and <code>http://localhost:8001/</code> but neither have helped. I've also tried setting my development <code>ENV.API_HOST = 'http://localhost:8001/';</code> with and without the various proxy values.</p>
  <p>This edit, build, deploy, refresh my browser, test, &amp; repeat process is <strong>REALLY</strong> slow and getting old <strong>REALLY</strong> fast.</p>
  <p>Could someone please explain to me how to get the ember-cli development server to properly access my rest api?</p>