React native fetch a local API

Question

I have an expo react native app, and i want to use a function from the API i made, in another project. I tested the url in Postman, and the url works fine. But i get the error: Network error failed in the app.

the klt_id and klt_name is from the Clients table. the url leads to a function that shows all the records from the Clients table.

this is what i have right now:

constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch('http://127.0.0.1:8000/api/v2/klant', )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson)
        this.setState({
          isLoading: false,
          dataSource: responseJson.data,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }


  render(){

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.klt_id}, {item.klt_name}</Text>}
          keyExtractor={({id}, index) => id}
        />
      </View>
    );
  }
}

Thanks in advance!

Does this answer your question? [Requesting API with fetch in javascript has CORS policy error](https://stackoverflow.com/questions/56379638/requesting-api-with-fetch-in-javascript-has-cors-policy-error). There are gazillions of posts why it didn't work for you. Please read what the [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is. — emix, Jan 22 '20 at 08:20

score 0 · Answer 1 · answered Jan 23 '20 at 13:37

0

You could give ngrok a try: it'll allow you to have a "normal" HTTPS URL you should be able to use in your Expo app without any issue. Example from their website:

answered Jan 23 '20 at 13:37

Charles Mangwa

151
2
5

i have tried it, but no result. not sure if i am doing it correct but i get gateway error – sander106 Jan 23 '20 at 14:53
are you using the `https` link they provided (not the `http` as in your snippet)? – Charles Mangwa Jan 23 '20 at 14:56
yea i used https – sander106 Jan 23 '20 at 14:58
try to update your post with the exact error message you're getting! It might inspire some people – Charles Mangwa Jan 23 '20 at 15:03
the error from the fetch or the error from the ngrok – sander106 Jan 23 '20 at 15:05

React native fetch a local API

1 Answers1