解决方法：

Question

我想做什么：

我正在尝试通过Expo上的ios设备向我的React Native应用中本地的API（使用ApiPlatform创建）发送请求。有人知道如何解决吗？：）

这是我要执行的请求： “ http://127.0.0.1:8000/api/beers”

有效方法：

我的请求在我的计算机上有效

我的请求通过键入以下内容在我的android模拟器上运行： “ http://10.0.2.2:8000/api/beers”

我做了什么：

对于Expo上的ios设备，我读到我需要通过计算机的Ipv4更改127.0.0.1:8000，所以我跑了

ipconfig

在一个Powershell中，获取我的Ipv4地址，并放入我的请求中： “ http://172.20.10.2:8000/api/beers”

我已经了解到ios不允许使用HTTP协议，因此我在app.json-> infoPlist-> NSAppTransportSecurity-> true

中添加了

    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSAppTransportSecurity" : {
          "NSAllowsArbitraryLoads" : true,
        }
      }
    }

。就像所有其他主题一样，但总是相同的错误：“网络请求失败”

我在iOS设备和android模拟器中都连接在同一网络中。

例如，我尝试使用“ https://anapioficeandfire.com/api/characters/583”，它可以在我的模拟器和iOS设备上使用。

我正在使用其他API，但是以“ https”开头。这里的问题似乎是“ http”。

但是我试图通过在app.json的infoPlist中添加“ NSAppTransportSecurity”：“ true”来修复它，但是没有任何变化。就像我说的较高。

我还尝试连接另一个家庭的Internet，更改IPv4。但仍然是问题。

我看不到其他解决方法。我可能会想念一些东西。

这里是允许请求的功能

export function getsBeersFromRatio(){
    const url = Platform.OS === 'android'? 'http://10.0.2.2:8000/api/beers?abv%5Bgte%5D=6.2' : 'http://172.20.10.2:8000/api/beers'
    return fetch(url)
        .then((response) => response.json())
        .catch((error) => console.log(error));
}


  _searchBeersFromRatio(){
    this.setState({
      beers: [],
    },
    () => {
      this._loadBeersFromRatio()
    })
  }



  _loadBeersFromRatio(){
    console.log('====================================');
    console.log('       NEW REQUEST                   ');
    console.log('====================================');
    this.setState({ isLoading: true })
    getsBeersFromRatio().then(data => {
      console.log(data);

    })
  }


    <Button
      title = "get data from API"
      onPress = {() => this._searchBeersFromRatio()}
    />

这是我的package.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "postinstall": "node ./scripts/stfu.js"
  },
  "dependencies": {
    "country-list": "^2.1.1",
    "expo": "^33.0.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-chart-kit": "^2.6.1",
    "react-native-elements": "^1.1.0",
    "react-native-flags": "^1.0.0",
    "react-native-redash": "^6.3.1",
    "react-native-view-more-text": "^2.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
    "rn-vertical-slider": "^1.0.4",
    "victory-native": "^32.0.2"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1"
  },
  "private": true
}

这是我的app.json

{
  "expo": {
    "name": "BierRatio",
    "slug": "BierRatio",
    "privacy": "public",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSAppTransportSecurity" : {
          "NSAllowsArbitraryLoads" : true,
        }
      }
    }
  }
}

预期行为

我希望使用与我的Android仿真器相同的日志

实际行为

实际输出是“网络请求失败”

谢谢！

Answer 1

解决方法：

我终于找到了一个工作场所：

当我在计算机上键入http：//“ My_IPv4_address”：8000 /“ My_Api”时，他说：“ ERR_CONNECTION_REFUSED”

所以我尝试运行$ php bin /控制台服务器：运行“ My_IPv4_address”：8000

我接受了防火墙通知。我再次在我的iOS设备中发送了请求，但我不知道为什么现在如此。

所以我需要运行

$ php bin /控制台服务器：运行

和其他Powershell

$ php bin /控制台服务器：运行“ My_IPv4_address”：8000

可以访问我的android仿真器和iOS设备中的本地API。

Answer 2

我遇到了完全相同的问题，我使用fetch()将数据从我的本机react应用程序发送到php服务器，我通过EXPO从我的iOS手机中进行了模拟，但是在遇到错误时却收到了与您相同的错误配置了正确的IPV4地址

fetch (http: // ipv4 address / ...)

不是本地主机。

此外，当我在PC上模拟Web视图并放上

时，

fetch (http: // localhost / ..)

我收到的数据一切正常。

iOS设备上的网络请求失败|| React-Native ||世博会

我想做什么：

有效方法：

我做了什么：

预期行为

实际行为

2 个答案:

解决方法：