ionic error 404 not found with ionic run android

Question

I have an ionic app which works well with ionic serve when I make POST orGET requests to my localhost , bt when I make ionic uild android and then ionic run android I always get a 404 POST not found, I tried almost everything. I have added the plugin whitelist and put in my config.xml

  <content src="index.html"/>
  <access origin="*"/>
  <allow-intent href="*"/>
  <allow-navigation href="*"/>

in index html I tried these meta(commented one and uncommented the other)

    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'> -->

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' * ws://localhost:35729 data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *;script-src 'self' localhost:35729 'unsafe-eval' 'unsafe-inline';">

I use sails as the backend , I think cors are well configured:

module.exports.cors = {
/***************************************************************************
 *                                                                          *
 * Allow CORS on all routes by default? If not, you must enable CORS on a   *
 * per-route basis by either adding a "cors" configuration object to the    *
 * route config, or setting "cors:true" in the route config to use the      *
 * default settings below.                                                  *
 *                                                                          *
 ***************************************************************************/
allRoutes: true,

/***************************************************************************
 *                                                                          *
 * Which domains which are allowed CORS access? This can be a               *
 * comma-delimited list of hosts (beginning with http:// or https://) or    *
 * "*" to allow all domains CORS access.                                    *
 *                                                                          *
 ***************************************************************************/
origin: '*',

/***************************************************************************
 *                                                                          *
 * Allow cookies to be shared for CORS requests?                            *
 *                                                                          *
 ***************************************************************************/
credentials: true,

/***************************************************************************
 *                                                                          *
 * Which methods should be allowed for CORS requests? This is only used in  *
 * response to preflight requests (see article linked above for more info)  *
 *                                                                          *
 ***************************************************************************/
methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',

/***************************************************************************
 *                                                                          *
 * Which headers should be allowed for CORS requests? This is only used in  *
 * response to preflight requests.                                          *
 *                                                                          *
 ***************************************************************************/
headers: 'content-type, access-control-allow-origin, authorization'

};

At the beginning of app.js I have this config

  angular
.module('frontend', [
  'ionic', 'ionic.service.core',
  'frontend.core',
  'ionic.service.analytics',
  //'cacheapp',
  //'cachemodule',
  'ionic-cache-src',
  'formlyIonic',
  'pascalprecht.translate',
  'angularMoment',
  'ionic.components',
  'ngFacebook',
  'translate.app',
  'translate.form',
  'angular-cache',
  'ngCordova',
  'gettext',
  'module.user',
  'module.gallery'
])
.constant('AccessLevels',{
      anon: 0,
      user: 1,
      admin: 2
})
.constant('BackendConfig',{
  url: "http://api-test-dev.com:1337",
  //url: "http://ip_of_my_phone:1337"
  //url: "10.0.2.2"
  //url: "10.0.2.2:1337"
  //url:"http://ip_of_my_phone"
  //url:"http://ip_of_my_wifi"
  //url:"http://ip_of_my_wifi:1337"
})

commented urls are all options I tried : I got them with ifconfig , when it was the case of my phone I disabled the wifi on my computer and used the connection usb of my phone(so the ip was usb0 in ifconfig). I also tried the url "http://localhost:1337" in app.js using port forwarding on chrome://inspect/#devices (by assigning to port 1337 of my device the localhost:1337 of my computer) . For listed urls in my file app.js I disabled port forwarding

But all configuration always give the error POST 404 not found

Any ideas?

Answer 1

I think I met this problem before.

The reason is when you run ionic serve or ionic run android -l it run the code (www folder) hosted from your computer, not the device. So it can access directly to the localhost. But when you build it and run on the real device, there isn't localhost hosted in there, then 404 NOT FOUND occur.

This is the way I solve it (only works with same Wi-fi network).

• Get the LAN/Wi-fi IPv4 of you computer (eg: 192.168.1.2)
• Replace the url from http://localhost with your computer IP.
• Add your port at the end. (eg: http://192.168.1.2:1337)
• Run ionic run android.