Preflight, or CORS error, on every request
<p>I've been struggling with CORS for a substantial amount of time, and still no closer to a full understanding.</p>

<p>My simplest example is using Wunderlist API - </p>

<p>Using the below code:</p>

<pre><code> var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://a.wunderlist.com/api/v1/lists",
  "method": "GET",
  "headers": {
    "x-client-id": "{ID}",
    "x-access-token": "{TOKEN}",
    "cache-control": "no-cache"
  },
  "data": "{\n\t\"revision\": 1,\n\t\"completed\": true\n}"
}

$.ajax(settings).done(function (response) {
  console.log(response);
});
</code></pre>

<p>Within Postman/Fiddler will return results. However, throwing it onto a basic site, or Codepen will either return a <code>405</code>, a <code>Pre-flight Warning</code> or an <code>Invalid Request</code></p>

<p>I've loosely come to the understanding that you allow it within your server side, but I have to assume that not every single site out there allows for Postman etc to connect, nor for every vendor I sign up with it allow my domain. </p>

<p>How is it you work on bypassing the CORS Compliance within an API Call then? I've tried a lot of things I've read, including crossDomain, Cross-Origin Header, etc and always get same result.</p>

<p>Any insight?</p>