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 .