title: ReactJS: Fetch results in "NetworkError when attempting to fetch resource."
body: <p>I'm trying to fetch from an external API in ReactJS. </p>
  
  <p>This is the function I'm using to fetch:</p>
  
  <pre><code>fetch(
        `https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}`
      )
        .then(data =&gt; setIbanResponse(data))
        .catch(error =&gt; setIbanResponse(error));
    }
  </code></pre>
  
  <p>When I <code>console.log(ibanResponse)</code> (I'm using <code>Hooks</code>) I get an</p>
  
  <blockquote>
    <p>Access to fetch at
    '<a href="https://www.iban-test.de/api/check/XXXX?authcode=XXXX" rel="nofollow noreferrer">https://www.iban-test.de/api/check/XXXX?authcode=XXXX</a>'
    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>
    
    <p>TypeError: Failed to fetch</p>
    
    <p>index.js:30 Cross-Origin Read Blocking (CORB) blocked cross-origin
    response
    <a href="https://www.iban-test.de/api/check/XXXX?authcode=XXXX" rel="nofollow noreferrer">https://www.iban-test.de/api/check/XXXX?authcode=XXXX</a>
    with MIME type application/json. See
    <a href="https://www.chromestatus.com/feature/5629709824032768" rel="nofollow noreferrer">https://www.chromestatus.com/feature/5629709824032768</a> for more
    details.</p>
  </blockquote>
  
  <p>In the network inspector, I can see a <code>200</code> response from the API, and if I make the request from my browser, it works just fine.</p>
  
  <p>How can I fix this fetch request?</p>
  
  <p>I've already tried this:</p>
  
  <pre><code>fetch(
        `https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}`,
        {
          headers: {
            "Access-Control-Allow-Origin": "*"
          }
        }
      )
        .then(data =&gt; setIbanResponse(data))
        .catch(error =&gt; setIbanResponse(error));
    }
  </code></pre>
  
  <p>And this:</p>
  
  <pre><code>    fetch(
        `https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}`
      )
        .then(response =&gt; response.json())
        .then(data =&gt; setIbanResponse(data))
        .catch(error =&gt; setIbanResponse(error));
    }
  </code></pre>
  
  <p>But it returns the same error.</p>
  
  <p>Edit: I'm editing the question to anyone searching for this same problem. I implemented the solution @Matin Sasan and @sideshowbarker said and it worked like a charm. I had to use a proxy to make the request.</p>