title: CORS AJAX Call using Cordova to Apache Tomcat
body: <p>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,</p>
  
  <pre><code>&lt;filter&gt;
    &lt;filter-name&gt;CorsFilter&lt;/filter-name&gt;
    &lt;filter-class&gt;org.apache.catalina.filters.CorsFilter&lt;/filter-class&gt;
    &lt;init-param&gt;
      &lt;param-name&gt;cors.allowed.origins&lt;/param-name&gt;
      &lt;param-value&gt;*&lt;/param-value&gt;
    &lt;/init-param&gt;
    &lt;init-param&gt;
      &lt;param-name&gt;cors.allowed.methods&lt;/param-name&gt;
      &lt;param-value&gt;GET,POST,HEAD,OPTIONS,PUT&lt;/param-value&gt;
    &lt;/init-param&gt;
    &lt;init-param&gt;
      &lt;param-name&gt;cors.allowed.headers&lt;/param-name&gt;
      &lt;param-value&gt;Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers&lt;/param-value&gt;
    &lt;/init-param&gt;
    &lt;init-param&gt;
      &lt;param-name&gt;cors.exposed.headers&lt;/param-name&gt;
      &lt;param-value&gt;Access-Control-Allow-Origin,Access-Control-Allow-Credentials&lt;/param-value&gt;
    &lt;/init-param&gt;
    &lt;init-param&gt;
      &lt;param-name&gt;cors.support.credentials&lt;/param-name&gt;
      &lt;param-value&gt;true&lt;/param-value&gt;
    &lt;/init-param&gt;
    &lt;init-param&gt;
      &lt;param-name&gt;cors.preflight.maxage&lt;/param-name&gt;
      &lt;param-value&gt;10&lt;/param-value&gt;
    &lt;/init-param&gt;
  &lt;/filter&gt;
  &lt;filter-mapping&gt;
    &lt;filter-name&gt;CorsFilter&lt;/filter-name&gt;
    &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
  &lt;/filter-mapping&gt;
  </code></pre>
  
  <p>I am using followng ajax code to send request </p>
  
  <pre><code>$.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'
                  });
              }
          });
  </code></pre>
  
  <p>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.</p>
  
  <p>After that, we are getting error as follows,</p>
  
  <pre><code>POST http://192.168.0.102/app/api/auth/login 404 (Not Found) 
  </code></pre>
  
  <p>here is call trace </p>
  
  <pre><code>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
  </code></pre>
  
  <p>my config.xml is,</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="yes"?&gt;
  &lt;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"&gt;
    &lt;name&gt;ionic_test1&lt;/name&gt;
    &lt;description&gt;
          An Ionic Framework and Cordova project.
      &lt;/description&gt;
    &lt;author email="hi@ionicframework" href="http://ionicframework.com/"&gt;
        Ionic Framework Team
      &lt;/author&gt;
    &lt;content src="index.html"/&gt;
    &lt;access origin="*" launch-external="yes" /&gt;
    &lt;preference name="webviewbounce" value="false"/&gt;
    &lt;preference name="UIWebViewBounce" value="false"/&gt;
    &lt;preference name="DisallowOverscroll" value="true"/&gt;
    &lt;preference name="BackupWebStorage" value="none"/&gt;
    &lt;feature name="StatusBar"&gt;
      &lt;param name="ios-package" value="CDVStatusBar" onload="true"/&gt;
    &lt;/feature&gt;
  
  &lt;/widget&gt;
  </code></pre>
  
  <p>I have also attached debug points on my server app which never gets hit.</p>
  
  <p>I try attaching chrome://inspect/devices to my android device and found request as follows,</p>
  
  <pre><code>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
  </code></pre>
  
  <p>When I try using ionic serve (Browser)</p>
  
  <pre><code>**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**
  </code></pre>
  
  <p>What is the reason behind? This error comes only in android web view. Is there any solution to this type of problem.</p>