Axios network error in expo react-native app

Question

Is there anyone know why an axios network error returns when an expo react-native app is being interacted with a physical iPhone using the expo go app?

Note: cors are enabled from the backend. No such error when interacting with the laptop browser🤔

I tried after changing the url of http://127.0.0.1:8081/predict to my ip address. But did not work

useEffect(() => {
axios
  .post('http://127.0.0.1:8081/predict', {
    image: image,
  })
  .then((response) => {
    setData(response.data?.predicted_class);
    switch (response.data?.predicted_class) {
      case 0:
        setCircleText('Normal');
        setCircleOutlineColor('#36db1d');
        break;
      case 1:
        setCircleText('Mild');
        setCircleOutlineColor('#ffcc00');
        break;
      case 2:
        setCircleText('Moderate');
        setCircleOutlineColor('#ff851b');
        break;
      case 3:
        setCircleText('Severe');
        setCircleOutlineColor('#ff4136');
        break;
      case 4:
        setCircleText('Proliferative DR');
        setCircleOutlineColor('#741b47');
      default:
        setCircleText('Cannot read');
        setCircleOutlineColor('#c9c8c5');
    }
  })
  .catch((error) => {
    console.error('Error:', error);
  });

}, []);

Answer 1

You cannot send a request to localhost in react native if the app is running on your physical device because axios will call the device itself insetad of your pc/server.

You'll need to get your machine local IP (on windows just run ipconfig on cmd, mac/linux run ifconfig on terminal) and then, supposing your pc local ip is 192.168.1.123, instead of requesting to http://127.0.0.1:8081/predict you'll need to call http://192.168.1.123:8081/predict.