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

Question

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;
}

Probably it is caused by CORS policy. You can came the requests from your terminal out other tool such as postman and take a look on the CORS headers. — lmarqs
– lmarqs, Commented Jul 23, 2020 at 11:18

Moufeed Juboqji · Accepted Answer · 2020-07-23 11:21:02Z

1

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}&....

answered Jul 23, 2020 at 11:21

Moufeed Juboqji

7024 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related