title: How to fix 'header contains multiple values '*, *', but only one is allowed.'
body: <p>I am fetching API, but getting an Error:
  "Access to fetch at ${API} from origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."</p>
  
  <p>I've already tried setting up options, but it din't help.</p>
  
  <pre><code>componentDidMount() {
      navigator.geolocation.getCurrentPosition(position =&gt; {
        const apiKey = 'XXX';
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        const options = {
          method: 'GET',
          headers: {
            'Content-type': 'application/json; charset=UTF-8'
          }
        };
        const url = `https://api.weatherbit.io/v2.0/current/airquality?lat=38.0&amp;lon=-78.0&amp;key=${apiKey}`;
        fetch(url, options).then(response =&gt; {
          if (response.status !== 200) {
            console.log(response.status);
          }
          response.json().then(data =&gt; {
            console.log(data);
          });
        });
      });
    }
  </code></pre>
  
  <p>I expect to get response looking like this:</p>
  
  <pre><code>  {  
       "lat":38,
       "lon":-78,
       "timezone":"America\/New_York",
       "city_name":"Louisa",
       "country_code":"US",
       "state_code":"VA",
       "data":[  
          {  
             "aqi": 12.345,
             "o3":57.3993,
             "so2":3.8594,
             "no2":5.42472,
             "co":383.437,
             "pm10":2.1667,
             "pm25":0.927972
          }
       ]
    }
  </code></pre>
  
  <p>But constantly continue getting this error.</p>