ReactJS: Fetch results in "NetworkError when attempting to fetch resource."

Question

I'm trying to fetch from an external API in ReactJS.

This is the function I'm using to fetch:

fetch(
      `https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}`
    )
      .then(data => setIbanResponse(data))
      .catch(error => setIbanResponse(error));
  }

When I console.log(ibanResponse) (I'm using Hooks) I get an

Access to fetch at 'https://www.iban-test.de/api/check/XXXX?authcode=XXXX' from origin 'http://localhost:3000' 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.

TypeError: Failed to fetch

index.js:30 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.iban-test.de/api/check/XXXX?authcode=XXXX with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

In the network inspector, I can see a 200 response from the API, and if I make the request from my browser, it works just fine.

How can I fix this fetch request?

I've already tried this:

fetch(
      `https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}`,
      {
        headers: {
          "Access-Control-Allow-Origin": "*"
        }
      }
    )
      .then(data => setIbanResponse(data))
      .catch(error => setIbanResponse(error));
  }

And this:

    fetch(
      `https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}`
    )
      .then(response => response.json())
      .then(data => setIbanResponse(data))
      .catch(error => setIbanResponse(error));
  }

But it returns the same error.

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.

Access-Control-Allow-Origin is on the _response_, not the _request_. See https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work — TrueWill, Jun 08 '19 at 23:01
The site only shows a PHP (server-side) example, so it may not be possible to call from JavaScript in a browser (without setting up a proxy). https://www.iban-test.de/demo.html — TrueWill, Jun 08 '19 at 23:09
Change your code to `fetch( \`https://cors-anywhere.herokuapp.com/https://www.iban-test.de/api/check/${input}?authcode=${IBAN_TEST_API}\` )`. For an explanation, see the *How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems* section of the answer at https://stackoverflow.com/a/43881141/441757 — sideshowbarker, Jun 09 '19 at 01:26

ReactJS: Fetch results in "NetworkError when attempting to fetch resource."

0 Answers0