Fetching Data and 403 Error ReactJS

JavaScript
1

Below is the part of the code where i try to fetch data for countries but i keep getting this message

App.js:20 GET https://cors-anywhere.herokuapp.com/https://restcountries.com/v2/all 403 (Forbidden)

below is my code , i hope someone can help and point to any possible issues with it .

 const [countries, setCountries] = useState([]);
  const [score, setScore] = useState(0);

  const FetchCountries = async () => {
    setLoading(true);
    try {
      const response = await fetch(
        "https://cors-anywhere.herokuapp.com/https://restcountries.com/v2/all"
      );
      const data = await response.json();
      setCountries(data);
    } catch (error) {
      setLoading(false);
      /* alert("Countries data failed to fetch"); */
    }
  };

  useEffect(() => {
    FetchCountries();
  }, []);

  console.log(countries);```
2

I was able to get this work with this:

https://cors-anywhere.herokuapp.com/https://restcountries.com/v2/all

Here is a pen that shows it in action.

3

it was already in my code

4

The more important part was the link to a working example.

1 Like
5

What was wrong with the other API?

https://restcountries.eu/rest/v2/all

I wouldn’t suggest you rely on a CORS proxy if you don’t have to. They tend to be unreliable and shouldn’t be used in production/release versions anyway so you would have to come up with something else for the final version.

1 Like
6

Problem solved , i checked the URL in the browser , with the following text and button

This demo of CORS Anywhere should only be used for development purposes, see https://github.com/Rob--W/cors-anywhere/issues/301.

To temporarily unlock access to the demo, click on the following button

i clicked the button and it worked

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.