无法从 expo 获取 localhost api
无法从 expo 获取 localhost api。
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}; 导出默认客户端;
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;
这个错误是合乎逻辑的,因为“localhost”是指定 本地计算机 逻辑接口的名称。
因此,当您要求应用程序向“http://localhost:3000/api”发出请求时,它会将请求发送到手机,因此它永远不会到达您的计算机。
但如果您的本地网络允许,您可以直接输入计算机的 IP 地址。
您必须暴露您的API。您可以做到这一点的一种方法是使用ngrok。
尝试以下:
- https://ngrok.com/ 并在注册后遵循安装步骤
-
解开开放终端和
./ ngrok http&lt; port_number&gt;
-
如果工作正常,您应该看到
转发:&lt; tecreding_address&gt;
- 将此转发地址复制为应用程序中的基本URL
-
只是为了测试,请尝试在浏览器中点击此转发地址,例如。
http://1a6b3022.ngrok.io/api/testing
您应该得到响应
希望这有用!