title: React JS - No 'Access-Control-Allow-Origin' header is present on the requested resource. Cross Origin Resource Error
body: <p>Im making an API call(Running on another domain) using Fetch in a React Web app. I am getting the error Following error.</p>
  
  <blockquote>
    <p>Access to fetch at
    '--------API URL---------' from origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' has been blocked by CORS policy:
    Response to preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. 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 have also read several answers on StackOverflow about the same issue, titled "Access-Control-Allow-Origin" but still couldn't figure out how to solve this. I don't want to use an extension IN Chrome or use a temporary hack to solve this. Please suggest the standard way of solving the above issue.</p>
  
  <p>my code looks like this.</p>
  
  <pre><code>{
          return fetch('-----------API URL--------',
          {   method:'GET',
              mode: 'cors',
              headers:{
                  'Access-Control-Allow-Origin':'*'
              },
          })
          .then((response) =&gt; response.json())
          .then((responseJson) =&gt; {
              console.log(responseJson.ALLORDERSRX);
              this.setState({
                  isLoading: false,
                  dataSource: responseJson.ALLORDERSRX,
              }, function(){
  
              });
          })
          .catch((error) =&gt;{
              console.error(error);
          });
  
      }
  </code></pre>