不使用 React Native 从本地主机获取 JSON 数据答案

【问题标题】：Not Fetching JSON data from localhost using React Native不使用 React Native 从本地主机获取 JSON 数据
【发布时间】：2018-06-17 12:09:06
【问题描述】：

这可能是重复的问题，但我尝试了互联网上的大部分内容，但没有成功。我是 React Native 的新手。我正在使用物理设备（我的 android 手机）作为运行我的输出，并尝试从我在本地主机（默认端口 80）中用 PHP 编码的测试项目之一获取 JSON 数据。

这是我的 Login.js 获取数据的登录函数：

login = () => {
    fetch('http://localhost/XTest/send_react', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password,
      })
    })
    .then((response) => response.json())
    .then((res) => {
      if (res.success === true) {
        AsyncStorage.setItem('user', res.user);
        this.props.navigation.navigate('Profile');
      } else {
        alert(res.message);
      }
    })
    .done();

我通过加载上面的 url 测试了我的 PHP 代码，它提供了 JSON 数据。但是我在 React Native 负载中得到的只是：

网络请求失败，出现一堆红色的错误代码。

我尝试更改我的 url => 'http:/localhost:80/xxxxxxxxx' 甚至添加了 "proxy": 'http://localhost/' 按照互联网页面某处的建议，但没有任何成功。任何帮助或建议将不胜感激。谢谢。

【问题讨论】：

标签： json reactjs react-native react-native-android

【解决方案1】：

这是因为 localhost 仅对设备本地。您需要运行 PHP 的实际设备的 IP 地址（如果它在同一个网络上，它可能看起来像 192.168.xx）在终端或命令提示符中尝试apr -a，也可以查看网络上所有设备的地址。

【讨论】：

【解决方案2】：

fetch('http://YOURIP(192.168.X.X):YOURPORT', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },

【讨论】：

【解决方案3】：

对于在 Android 模拟器 (Genymotion) 中遇到此问题的任何人，请确保在端口 number 之后使用本地 IP address。您可以在本地终端或命令提示符下使用 ipconfig 轻松识别。

我在 React-Native 中的匿名函数示例

login = () => {

fetch('http://192.x.x.x:PORT', {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ 
      username: this.state.username, 
      password: this.state.password }),
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
  ...etc 
}

【讨论】：

【解决方案4】：

我也有同样的问题，任何人都可以找到解决方案。我尝试使用 IP 地址但没有给出响应。请看我下面的代码。

let email = this.state.email;
let pass = this.state.pass;

fetch("http://192.168.1.2:8080/ReactAPI/post.php", {
      method: "POST",
      body: JSON.stringify({
        email: email,
        password: pass
      }),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then(response => console.log(response))
      .catch(err => console.log(err));

【讨论】：

【解决方案5】：

您可以在特定 IP 启动您的服务器...

例如。如果是 json-server，--host [IP-address] 将在该位置启动您的服务器：

json-server --watch db.json -p 3001 -d 2000 --host 192.168.83.230

【讨论】：