2

I was working on a React APP which fetches data from https://restcountries.com/v2/all and now I have an error.

useEffect(() => {
  fetch(`https://restcountries.com/v2/all`)
    .then((r) => r.json())
    .then((data) => {
      if (data !== undefined) {
        setCountries(data);
      } else {
        alert('Can´t Load Data');
      }
    });
}, []);

enter image description here

Kartikey
  • 4,516
  • 4
  • 15
  • 40
miouri
  • 359
  • 3
  • 10
  • 2
    Does this answer your question? [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – zero298 Sep 22 '21 at 17:16
  • If you receive an error you don't understand, please try googling the error message first, before posting here. This is a very common error and simply means that the API you're trying to use is not supposed to be using inside a browser. –  Sep 22 '21 at 17:20
  • sorry but no. Ive tried but still do not work... – miouri Sep 22 '21 at 17:20
  • There seems to be a recent bug or change in that API. [More](https://gitlab.com/amatos/rest-countries/-/issues/34) – James Sep 22 '21 at 17:25
  • Did you add `Access-Control-Allow-Origin: *` to a header in your `fetch` request? – Sharzad Gh Sep 22 '21 at 17:38
  • 1
    @SharzadGh That won't do anything. That's a response header. That's how the API server tells the browser what domains can use the API. Including it in the fetch is not what needs to happen. – zero298 Sep 22 '21 at 17:56
  • Working fine on my end, this error is not reproducible. Click on this link to hit the get api: https://restcountries.com/v2/all – Ritik Banger Sep 13 '22 at 06:02

3 Answers3

1

**

use this format with header

** ##

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {`enter code here`
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}
}, []);
AmirYousaf
  • 23
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 22 '21 at 21:14
0

You are getting a CORS error which means target domain of api (restcountries) does not allow other domains to fetch data. The solution to this problem is a server side browser or headless browser. Like selenium and puppeteer

https://www.selenium.dev/

https://github.com/puppeteer

But i have tested and api is giving me data in browser with same fetch code. I cant reproduce the problem. Its an issue with something else

Prince Hamza
  • 1,090
  • 12
  • 21
0

this is happening due to multiple reason like due to authentication or your are not sending token in request header second due to server down or may be your are passing wrong param to request third one my be this endpoint can me access by only specific domains url.

AmirYousaf
  • 23
  • 4