The localhost api can not be fetched from the expo

Question

The localhost api can not be fetched from the expo.

const search = async(type) => { let response = await fetch(http://localhost:3000/api/${type}, { accept: 'application/json' }); let result = await response.json(); return result; }

const create = async(type, data) => { let response = await fetch(http://localhost:3000/api/${type}, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: 'post', body: JSON.stringify(data) }); let result = await response.json(); return result; }

const Client = {search, create}; export default Client;

Client.js

const search = async(type) => {
let response = await fetch(`http://localhost:3000/api/${type}`, {
 accept: 'application/json'
});
let result = await response.json();
return result; }
const create = async(type, data) => {
let response = await fetch(`http://localhost:3000/api/${type}`, {
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 method: 'post',
 body: JSON.stringify(data)
});
let result = await response.json();
return result;
}
const Client = {search, create};
export default Client;

App.js

import React, { Component } from 'react';
import {
 Text,
 View,
 TextInput,
 Button,
 StyleSheet
} from "react-native";
import Client from './Client.js';
class App extends Component {
 constructor() {
 super()
 this.state = {
 users: [] // user에 대한 정보를 담기 위한 state
 }
 this.handleUserInputChange = this.handleUserInputChange.bind(this)
 }
 componentWillMount = () => {
 this.getUser()
 }
 handleUserInputChange = event => {
 const {target: {name, value}} = event
 this.setState({
 [name]: value
 });
 }
 getUser = async() => {
 Client.search('User') // Client.js에서 
 .then(data => {
 this.setState({
 users: data 
 })
 })
 }
 submitUser = () => {
 const data = {
 "$class": "org.acme.model.User",
 "phonenumber": this.state.phonenumber,
 "email": this.state.email,
 "firstName": this.state.firstName,
 "lastName": this.state.lastName,
 }
 Client.create('User', data)
 .then(() => {
 this.getUser()
 })
 }
 render() {
 return(
 <View className="App">
 <Text>Add User</Text>
 <Text>phonenumber:</Text>
 <TextInput 
 onChange={this.handleUserInputChange}
 type="text"
 name="phonenumber" />
 <Text>email:</Text>
 <TextInput
 onChange={this.handleUserInputChange}
 type="text"
 name="email" />
 <Text>firstName:</Text>
 <TextInput 
 onChange={this.handleUserInputChange}
 type="text"
 name="firstName" />
 <Text>lastName:</Text>
 <TextInput 
 onChange={this.handleUserInputChange}
 type="text"
 name="lastName" />
 <Button title="New User" onPress={()=> this.submitUser}/>
 <View style={styles.container}>
 <Text style={styles.userlist}>
 User List
 </Text>
 {this.state.users.map((r, i) => (
 <View style={styles.userstate}
 key={i}>
 <Text>phonenumber: {r.phonenumber}</Text>
 <Text>email: {r.email}</Text>
 <Text>firstName: {r.firstName}</Text>
 <Text>lastName: {r.lastName}</Text>
 </View>
 ))}
 </View>
 </View>
 )
 }
}
const styles=StyleSheet.create({
 container: {
 flex:1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 userlist:{
 fontSize: 20,
 textAlign: 'center',
 margin: 10,
 },
 userstate:{
 textAlign: 'center',
 color: '#333333',
 marginBottom: 5,
 },
});
export default App;

• Wainage: Use your computer's real IP address
• M.Armoun: please format your post (where ever you used code).

Answer 1

The error is logical, because "localhost" is the name that designates a logical interface of the local computer.

So when you ask your application to make a request to "http://localhost:3000/api", it sends the request to the phone so it will never reach your computer.

But if your local network allows it, you can put directly the IP address of your computer.

Answer 2

You have to expose your APIs. One way you can do this is by using ngrok.

Try the below:

1. https://ngrok.com/ and follow the steps for installation after signing up
2. After unzipping open terminal and ./ngrok http <port_number>
3. If it is working, you should see a Forwarding: <forwarding_address>
4. Copy this forwarding address as your base url in the app
5. Just to test, try hitting this forwarding address in your browser, ex. http://1a6b3022.ngrok.io/api/testing you should get a response

Hopefully this is helpful!