title: API Fetch failed with No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I've been running out of my mind trying to deal with this problem.</p>
  
  <p>I'm running React.js on my local machine under <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a> and i'm trying to use the fetch method to load some data from <code>http://api.population.io:80/1.0/countries</code></p>
  
  <p>According to the API owner "The standard response format is JSON (application/json) with CORS for cross-domain requests."</p>
  
  <p>I've tried various combinations of headers and what i have right now is this setup:</p>
  
  <pre><code>fetch("http://api.population.io:80/1.0/countries",{
      method: 'GET',
      mode: 'cors',
      headers: new Headers({
          "Content-Type": "application/json",
          'Access-Control-Allow-Origin':'*'
      })
  })
  </code></pre>
  
  <p>According to Chrome, the following headers are being sent through the request: </p>
  
  <pre><code>Access-Control-Request-Headers: access-control-allow-headers,access-control-allow-origin,content-type
  Access-Control-Request-Method: GET
  Origin: http://localhost:3000
  Referer: http://localhost:3000/reports
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
  </code></pre>
  
  <p>But of course, the server returns a 403 status code with the following message:</p>
  
  <blockquote>
    <p>Failed to load <a href="http://api.population.io/1.0/countries" rel="nofollow noreferrer">http://api.population.io/1.0/countries</a>: Response to
    preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' is therefore not allowed
    access. The response had HTTP status code 403. If an opaque response
    serves your needs, set the request's mode to 'no-cors' to fetch the
    resource with CORS disabled.</p>
  </blockquote>
  
  <p>I know about the chrome plugin which allows me to work around this issue but this is not ideal and i'm afraid i don't know what to do, i've been trying to fix this my whole day and i finally gave up at 4am after trying almost everything i could find.</p>
  
  <p>If there's someone smart enough to enlighten me, i'd definitely appreciate it and i'm even willing to ship to you a bunch of beers just to help me sort this out.</p>