title: CORS error using Aurelia Fetch client
body: <p>I'm using Aurelia Fetch Client to query my own Slim Framework RESTful API.  The API includes the correct header (as verified by Postman):</p>
  
  <pre><code>Access-Control-Allow-Headers →X-Requested-With, Content-Type, Accept, Origin, Authorization
  Access-Control-Allow-Methods →GET, POST, PUT, DELETE, OPTIONS
  Access-Control-Allow-Origin →*
  Cache-Control →no-store, no-cache, must-revalidate, post-check=0, pre-    check=0
  Connection →close
  Content-Type →application/json;charset=utf-8
  Expires →Thu, 19 Nov 1981 08:52:00 GMT
  Host →localhost:8080
  Pragma →no-cache
  X-Powered-By →PHP/5.6.19
  </code></pre>
  
  <p>However, I'm getting the following error in the Javascript console:</p>
  
  <p><code>Fetch API cannot load http://localhost:8080/api/v1/calendar/2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</code></p>
  
  <p>If I use the CORS extension for Google Chrome, I can connect successfully.  (However, a secondary problem is that the CORS extension seems to be killing the response status code, changing everything to 200 even when my API returns 403 or 500.)</p>
  
  <p>My Aurelia code is:</p>
  
  <pre><code>saveCalendar() {
      this.httpClient.fetch('http://localhost:8080/api/v1/calendar/2', {
          method: 'post',
          body: json(data)
      }).then(response =&gt; {
              window.alert("Got a response: " + response.status);
              if (response.status == 200) { // OK
                  window.alert("Calendar saved!");
              } else { // Error
                  window.alert("Error");
              }
          });
      this.getCalendars();
  }
  </code></pre>
  
  <p>Why isn't <code>Access-Control-Allow-Origin: *</code> allowing me access from anywhere?</p>
  
  <p>=== 
  <strong>Edit:</strong></p>
  
  <p>After more careful observation, I see that Aurelia and Fetch are making 2 requests.  The preflight request OPTIONS seems to go fine and receives the CORS <code>Access-Control-Allow-Origin: *</code> header in the response.  However, in the actual POST request, the API is not returning anything.  The <strong>POST request headers</strong> are as follows:</p>
  
  <p><code>Accept:*/*
  Accept-Encoding:gzip, deflate, br
  Accept-Language:en-US,en;q=0.8,es-419;q=0.6,es;q=0.4,gl;q=0.2
  Cache-Control:no-cache
  Connection:keep-alive
  Content-Length:142
  content-type:application/json
  Host:localhost:8080
  Origin:http://localhost:9000
  Pragma:no-cache
  Referer:http://localhost:9000/
  User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36</code></p>
  
  <p>When I copy these headers into Postman to make the same request, it also fails in the same way.  But, if I remove one of the headers (<code>content-type:application/json</code>), it works.  </p>
  
  <p>The actual request in my Aurelia code looks like this:</p>
  
  <pre><code>// src/common/api.js
  import { inject } from 'aurelia-dependency-injection';
  import 'fetch';
  import { HttpClient, json } from 'aurelia-fetch-client';
  
  @inject(HttpClient)
  export class API {
    constructor(httpClient) {
      httpClient.configure(config =&gt; {
        config
          .withBaseUrl('http://localhost:8080/api/v1');
          .withDefaults({
            mode: 'cors',
            headers: {
              'Accept': 'application/json'
              'Content-type' : 'application/json'
            }
          });
      });
      this.httpClient = httpClient;
    }
  
    getData(url) {
      return this.httpClient.fetch(url)
        .then(response =&gt; response.json());
    }
  
    postData(url, data) {
      return this.httpClient.fetch(url, {
        method: 'post',
        body: json(data)
      });
    }
  }
  </code></pre>
  
  <p>It would seem obvious to remove the <code>'Content-type' : 'application/json'</code> from the Aurelia API client Fetch config, but even when I do, it still sends the header.</p>
  
  <p>So my new questions are:
  1. How do I prevent Aurelia from sending this header?
  2. OR... Why is Slim dying when receiving this header?
  3. Is there anything else wrong with my code?</p>