Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Network request failed || expo || iOS device #25597

Closed
AlexisChup opened this issue Jul 11, 2019 · 5 comments
Closed

Network request failed || expo || iOS device #25597

AlexisChup opened this issue Jul 11, 2019 · 5 comments
Labels
Bug Platform: iOS iOS applications. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@AlexisChup
Copy link

🐛 Bug Report

What I would like to do

I'm try to send a request to my API (created with ApiPlatform) in local in my React Native app with my ios device on expo.
Here the request that I want to do : "http://127.0.0.1:8000/api/beers"

What works

My request works on my computer

My request works on my android emulator by typing that : "http://10.0.2.2:8000/api/beers"

What I've done

For the ios Device on expo, I've read that I need to change 127.0.0.1:8000 by the Ipv4 of my computer, so I ran

ipconfig

in a powershell, and get my Ipv4 address, put in my request : "http://172.20.10.2:8000/api/beers"

I've read that ios doesn't allow http protocole, so I add in my app.json -> infoPlist -> NSAppTransportSecurity -> true

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

Like all the other topic said, but always the same error : "Network request failed"

I don't see other way to fix it. I probably miss something.

Here the function that permit the request

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()}
    />

Here my 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
}

Here my 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,
        }
      }
    }
  }
}

Environment

  Expo CLI 2.11.6 environment info:
    System:
      OS: Windows 10
    Binaries:
      npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.3.0.0 AI-182.5107.16.33.5314842

Target

iOS device on Expo on React Native app

Expected Behavior

I would like the same output as the android emulator do.

Actual Behavior

My actual output is "Netword request failed"

@AlexisChup AlexisChup added the Bug label Jul 11, 2019
@react-native-bot react-native-bot added the Platform: iOS iOS applications. label Jul 11, 2019
@react-native-bot
Copy link
Collaborator

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Resolution: Needs More Information labels Jul 11, 2019
@RobinCsl
Copy link

Hi @AlexisChup,

It seems you are trying to access a local API endpoint, running on your desktop computer, from your iOS device.

To pinpoint the issue:

  • can you try to use another API endpoint, for example https://anapioficeandfire.com/ and report if the network request worked?
  • is your iOS device connected to the Internet on the same network as your desktop computer?

@AlexisChup
Copy link
Author

Hi @RobinCsl

Yes, that's it.

I'm connected in the same network in both.

I've tried your API example, and it works on my emulator and my iOS device.

I'm using other API but there are started by 'https'. Here the problem seem to be the 'http'.

However I tried to fixed it by add "NSAppTransportSecurity" : "true" in the infoPlist in the app.json, but nothing change. Like I say upper.

I've also try to connected to internet in an other home, change the IPv4. But still the issue.

I really don't have other ideas to fix it.

Thanks for your time !

@AlexisChup
Copy link
Author

Workaround

I finally find a workaroud :

When I typed http://"My_IPv4_address":8000/"My_Api" on my computer, he said : "ERR_CONNECTION_REFUSED"

So I tried to run $ php bin/console server:run "My_IPv4_address":8000

A firewall notification appears to me, I accept it.
I send my request again in my iOS device and I don't know why it works now.

So I need to run

$ php bin/console server:run

and in a other powershell

$ php bin/console server:run "My_IPv4_address":8000

to have access to my local API in my android emulator and my iOS device.

@RobinCsl
Copy link

Glad you figured it out!

@facebook facebook locked as resolved and limited conversation to collaborators Oct 9, 2021
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 9, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Platform: iOS iOS applications. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

3 participants