title: Fetch api cors request throws error: No 'Access-Control-Allow-Origin', but Pre-Flight response shows header is set
body: <p>I'm using the fetch api to send json data to a third party api and view the response. The endpoint I'm hitting is supposed to have CORS enabled for any origin, but I'm getting an error that says <code>No 'Access-Control-Allow-Origin' header is present</code>. </p>
  
  <p>If I send a request with the <code>OPTIONS</code> method to force it to be Pre-Flighted, I can see that <code>Access-Control-Allow-Origin: *</code> is in fact set, as you can see below...</p>
  
  <p><a href="https://i.stack.imgur.com/D05ig.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D05ig.png" alt="enter image description here"></a></p>
  
  <p>And here's my fetch request...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>fetch(url, {
      method: 'POST',
      body: JSON.stringify(payload),
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      console.log(json);
    })
    .catch(function(error) {
      console.log(error);
    })</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: I should probably mention that I do not have control over the server. Also, I'm hitting the api from localhost, not sure if that has any implications...</p>