Failed to fetch an API

Question

I'm fetching an API from the OMDB API and I get this output (TypeError: Failed to fetch).

I tested the API with Postman and I got a Positive response. My App has a inputbox and a search button only! It should display the movies when a user inputs a title.

class App extends React.Component {
  //state that stores the movies fetched from imdb database
  state = {
    movies: []
  }
  //sendRequest function that uses unirest to get our movie information. 
  sendRequest = (Title) => {
    const req = unirest("GET", "http://www.omdbapi.com/?i=tt3896198&apikey=275a2eec");
    req.query({
      "page": "1",
      "r": "json",
      "s": Title
    });
    req.headers({
      "x-rapidapi-host": "The OMDb API",
      "x-rapidapi-key": "275a2eec"
    });
    req.end((res) => {
      if (res.error) throw new Error(res.error);
      //We’re pulling our movies out of the response data, and storing them in our app state.
      const movies = res.body.Search;
      this.setState({
        movies
      });
      console.log(res.body);
    });
  }
}

Check the `Access-Control-Allow-Origin` in response headers. If they dont match then react's fetch API can throw that error. — urbz, Feb 18 '20 at 14:30

score 1 · Accepted Answer · answered Sep 27 '21 at 08:00

Usually, we get this error when Access-Control-Allow-Origin of response header and origin of request won't match.

Check out this article for a detailed explanation.

If you're testing this application on localhost you may try changing the http to https. This is the simple solution that sometimes works in this type of errors.

Failed to fetch an API

1 Answers1