开发者问题收集

无法从 expo 获取 localhost api

2019-01-05
1916

无法从 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;
2个回答

这个错误是合乎逻辑的,因为“localhost”是指定 本地计算机 逻辑接口的名称。

因此,当您要求应用程序向“http://localhost:3000/api”发出请求时,它会将请求发送到手机,因此它永远不会到达您的计算机。

但如果您的本地网络允许,您可以直接输入计算机的 IP 地址。

2022-05-31

您必须暴露您的API。您可以做到这一点的一种方法是使用ngrok。

尝试以下:

  1. https://ngrok.com/ 并在注册后遵循安装步骤
  2. 解开开放终端和 ./ ngrok http&lt; port_number&gt;
  3. 如果工作正常,您应该看到 转发:&lt; tecreding_address&gt;
  4. 将此转发地址复制为应用程序中的基本URL
  5. 只是为了测试,请尝试在浏览器中点击此转发地址,例如。 http://1a6b3022.ngrok.io/api/testing 您应该得到响应

希望这有用!

Satoe Sakuma
2020-01-26