CODEWITHSUNDEEP
javascriptreactjsapi
msalla
msalla

Reputation: 765

Why am I getting generic "TypeError: Failed to fetch" errors?

When fetching from some APIs, I get TypeError: Failed to fetch errors.

For example, the URL used in the snippet below is an example provided by an API provider. It can be accessed without a key. It works fine in my browser but will throw an error in my code.

Fetching from another public API, https://api.punkapi.com/v2/beers/random, works perfectly.

What is the difference between these APIs that prevents me fetching from some and works for others others?

export default function App() {
  useEffect(() => {
    fetch(
      'https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=439d4b804bc8187953eb36d2a8c26a02'
    )
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => {
        console.error(error);
      });
  }, []);

  return null;
}

Upvotes: 0

Views: 1264

Answers (1)

Moufeed Juboqji
Moufeed Juboqji

Reputation: 700

you can't get data from samples caused API is blocked due to CORS header ‘Access-Control-Allow-Origin’ missing

you need to generate api key(https://openweathermap.org/price) and connect to api

//ex:
api.openweathermap.org/data/2.5/weather?appid={your api key}&....

Upvotes: 1

Related Questions