Http failure response for http://192.168.178.21:1117/api/v1/users: 0 Unknown Error

[ypkkhatri]

I'm facing an issue in my production build, I'm trying to fetch the data using HTTP rest API but it throws an error, it's working on local and development environment but is not in a production build. For info, this application is for the local network and trying to connect the backend which is running on another PC in the same network.

Below is the error:

{
   "headers":{
      "normalizedNames":{
         
      },
      "lazyUpdate":null,
      "headers":{
         
      }
   },
   "status":0,
   "statusText":"Unknown Error",
   "url":"http://192.168.178.21:1117/api/v1/users",
   "ok":false,
   "name":"HttpErrorResponse",
   "message":"Http failure response for http://192.168.178.21:1117/api/v1/users: 0 Unknown Error",
   "error":{
      "isTrusted":true
   }
}

capacitor.config.ts file:

const config: CapacitorConfig = {
  appId: 'com.my.company',
  appName: 'MyMobileApp',
  webDir: 'www',
  bundledWebRuntime: false,
  android: {
    allowMixedContent: true,
  },
  server: {
    allowNavigation: [
      'http://192.168.178.21:1117',
      '192.168.178.21:1117',
      '192.168.178.21',
      'http://*/*',
    ],
  },
  cordova: {
    preferences: {
      ScrollEnabled: 'false',
      BackupWebStorage: 'none',
      SplashMaintainAspectRatio: 'true',
      FadeSplashScreenDuration: '300',
      SplashShowOnlyFirstTime: 'false',
      SplashScreen: 'screen',
      SplashScreenDelay: '3000',
      ShowSplashScreenSpinner: 'false',
    },
  },
};

export default config;

My packages:

...
    "@capacitor/android": "3.1.2",
    "@capacitor/app": "1.0.2",
    "@capacitor/camera": "^1.0.3",
    "@capacitor/core": "3.1.2",
    "@capacitor/filesystem": "^1.0.2",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/splash-screen": "^1.1.0",
    "@capacitor/status-bar": "1.0.2",
    "@capacitor/storage": "^1.0.3",
    "@ionic-native/app-version": "^5.34.0",
    "@ionic-native/barcode-scanner": "^5.34.0",
    "@ionic-native/clipboard": "^5.34.0",
    "@ionic-native/core": "^5.34.0",
    "@ionic-native/splash-screen": "^5.34.0",
    "@ionic-native/status-bar": "^5.34.0",
    "@ionic/angular": "^5.5.2",
    "@ionic/pwa-elements": "^3.0.2",
    "cordova-android": "^8.1.0",
    "cordova-clipboard": "^1.3.0",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-splashscreen": "^6.0.0",
    "cordova-plugin-statusbar": "^2.4.3",
    "phonegap-plugin-barcodescanner": "^8.1.0",
...

It's been two days since this issue. Does anyone have any idea why that's happening?

[SergioVazquezDev]

Let's say you've got a server running on your machine at http://localhost:3000. This is fine when you are testing your Ionic application on your computer because you can just send your HTTP requests to:

http://localhost:3000/photos/upload
But once you deploy the application as a native iOS or Android application to your device, this URL will no longer work since the context for localhost means that it will no longer be referring to the computer where your server is running. So, how do we forward these requests from our mobile device to the computer that is running the server/backend?

https://eliteionic.com/tutorials/accessing-localhost-from-mobile-device-ios-android/