CORS AJAX Call using Cordova to Apache Tomcat

Question

We are using apache Cordova and ionic framework for application development. When we tested application on browser using "ionic serve" command first we got error saying "No Access-Control-Allow-Origin is present" To Solve this I have added CorsFilter in apache tomcat's web.xml as follows,

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

I am using followng ajax code to send request

$.ajax({
            xhrFields: {
                withCredentials: true
            },
            url: "http://rest_url/api/auth/login", 
            type:"POST",
            //crossDomain: true,
            //data:{ email: user.username, password: user.password }, 
            //contentType: "application/json",
            data: "{\"email\":\"" + user.username + "\",\"password\":\""+user.password+"\"}",

            success: function(data){
                alert(data);

            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {

                console.log("error --- "+ XMLHttpRequest.responseText);

                });
            }
            ,
            fail: function(){
                var alertPopup = $ionicPopup.alert({
                    title: 'Login Failed',
                    template: 'An Unexpected Error Occured'
                });
            }
        });

After adding this, testing with "ionic serve" was successful. Now we moved to actual device testing and using "cordova run android" deployed application on android phone.

After that, we are getting error as follows,

POST http://192.168.0.102/app/api/auth/login 404 (Not Found) 

here is call trace

jquery-2.1.3.min.js:4k.cors.a.crossDomain.send 
jquery-2.1.3.min.js:4n.extend.ajax 
jquery-2.1.3.min.js:4$scope.signIn 
controllers.js:8$parseFunctionCall 
ionic.bundle.js:20270(anonymous function) 
ionic.bundle.js:52468Scope.$eval 
ionic.bundle.js:22326Scope.$apply 
ionic.bundle.js:22425(anonymous function) 
ionic.bundle.js:52467n.event.dispatch 
jquery-2.1.3.min.js:3r.handle 
jquery-2.1.3.min.js:3triggerMouseEvent 
ionic.bundle.js:2856tapClick 
ionic.bundle.js:2845tapTouchEnd

my config.xml is,

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.ionictest1907317" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>ionic_test1</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
  <content src="index.html"/>
  <access origin="*" launch-external="yes" />
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>

</widget>

I have also attached debug points on my server app which never gets hit.

I try attaching chrome://inspect/devices to my android device and found request as follows,

Provisional headers are shown
Accept:*/*
Authorization:DATTUS_AUTH
Content-Type:application/json
Origin:file://
User-Agent:Mozilla/5.0 (Linux; Android 5.0; XT1092 Build/LXE22.46-19.1) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id:D819972A-6255-296E-A773-638D8EB7F3C9

When I try using ionic serve (Browser)

**Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,hi;q=0.6
Access-Control-Request-Headers:accept, authorization, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:192.168.0.102
Origin:http://192.168.0.113:8100
Referer:http://192.168.0.113:8100/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36**

What is the reason behind? This error comes only in android web view. Is there any solution to this type of problem.