Ionic application shows localhost:8080 in chrome inspect

Question

beginner in ionic technology. Facing issue after creating project ionic start Myapp blank ionic cordova run android

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.11
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.11.2
npm               : 5.6.0
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\XXX\AppData\Local\Android\Sdk

Misc:

backend : pro.

After running the application to inspect using android device. chrome://inspect/#devices Following differences are there !

Above image and URL starts with localhost:8080

here in below image URL starts with file:///android_asset/www/index.html

How to get URL as file:///android_asset/www/index.html in every ionic projects using chrome inspect instead of localhost:8080?

Due to this issue Facing issue like : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 400.

Answer 1

The above issue resolved by following command

project directory>ionic cordova plugin remove cordova-plugin-ionic-webview 
project directory>ionic cordova run android

and check in chrome://inspect it will connect with file:///android_asset it will work !! Happy coding

Answer 2

Removing cordova-plugin-ionic-webview has side effects, especially if you also want to deploy the same app for iOS.

The actual solution for your problem is to return the correct Access-Control-Allow-Origin header in the backend application you are trying to access.

You didn't provide the information, but I guess it was an OPTIONS requests as well that your backend isn't configured to respond to correctly which is why you received the http status code 400. Your backend should also handle those and return a 200 OK.