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

Capacitor
1

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 production build:
Below is he 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?

2

Its is resolved by adding cleartext in capacitor.config.ts:

{
  server: {
    allowNavigation: [
      ...
    ],
    cleartext: true,
  },
}

Reference: angular - Http.get() working but not working in build(Release/Debug) in Ionic 4 - Stack Overflow

3

A much better idea would be to switch to using https endpoints and hostnames with proper SSL certificates.

1 Like
4

I would not recommend doing this, as this could open up possible attack vectors for your app.

From the docs…

   * Allow cleartext traffic in the Web View.
     *
     * On Android, all cleartext traffic is disabled by default as of API 28.
     *
     * This is intended for use with live-reload servers where unencrypted HTTP
     * traffic is often used.
     *
     * **This is not intended for use in production.**

As @rapropos has suggested, a better solution is to use HTTPS endpoints that are secure.

1 Like
5

While I agree with both of you, they are clearly pointing to a local dev server, in those cases using https is tricky as self signed certificates won’t work and I’ve never been able to generate a good certificate for local development.

Nevertheless, an user should never put cleartext setting in their capacitor config file, that should be only set by frameworks tooling to enable live reload, if you want to allow cleartext, you should add it manually in your AndroidManifest.xml by putting android:usesCleartextTraffic="true" inside the application tag, and remember to remove it before doing the release build that points to a real https server.

Or even better, configure the network security like this to only allow http connections to your local IPs.

6

What I do for this situation is:

  1. pick an arbitrary hostname for development that is otherwise unused on a publicly accessible domain under my control (let’s say jcesarcrib.ionicframework.com)
  2. temporarily spin up a publicly-accessible VM, install an httpd and certbot on it
  3. point jcesarcrib.ionicframework.com at the host made in step 2
  4. acquire valid SSL cert from letsencrypt.com for jcesarcrib.ionicframework.com
  5. copy said cert to internal dev network
  6. create a local VM (using VirtualBox or whatever you prefer, or even on bare metal if you wish) to use for development
  7. tell my internal DNS server that the box in step 6 is jcesarcrib.ionicframework.com (or you could probably do this with /etc/hosts)
  8. install the SSL cert from step 4 onto the host made in step 6
  9. wait 3 months
  10. do steps 2, 3 again, wake certbot up and get it to renew the cert
  11. GOTO 8
7

looks simple enough :crazy_face:

What I do when I need https urls to my localhost is to use ngrok https://ngrok.com/