title: How do I fix CORS issue in Fetch API
body: <p>I'm building a front-end only basic Weather App using reactjs. For API requests I'm using Fetch API.
  In my app, I'm getting the current location from a <a href="http://ip-api.com/json" rel="noreferrer">simple API</a> I found 
  and it gives the location as a JSON object. But when I request it through Fetch API, I'm getting this error.</p>
  
  <pre><code>Failed to load http://ip-api.com/json: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
  </code></pre>
  
  <p>So I searched through and found multiple solutions to fix this.</p>
  
  <ol>
  <li>Enabling CORS in Chrome solves the error but when I deploy the app on heroku, how can I access it through a mobile device without running into the same CORS issue.</li>
  <li>I found an <a href="https://cors-anywhere.herokuapp.com/" rel="noreferrer">proxy API</a> which enables the CORS requests. But as this is a location request, this gives me the location of the proxy server. So it's not a solution.</li>
  <li>I've gone through this <a href="https://stackoverflow.com/questions/25727306/request-header-field-access-control-allow-headers-is-not-allowed-by-access-contr">Stackoverflow question</a> and added the headers to the header in my http request but it doesn't solve the problem. (Still it gives the same error).</li>
  </ol>
  
  <p>So how can I solve the issue permanently ? What's the best solution I can use to solve the CORS issue for http requests in Fetch API ?</p>