title: Web API call failed in device mode but working in emulater in Cordova
body: <p>In my project I have deployed my web api in cloud server and getting the data from that service. In ripple emulator it is working perfectly. But when I debuging in device mode  (Android Tab) it is enable to call the service.It didn't show any specific error message also.</p>
  
  <p>here in my index.html page </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet" /&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="lib/ionic/js/angular/angular-resource.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="lib/ng-cordova.min.js"&gt;&lt;/script&gt;
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;!--angularJS local storage--&gt;
      &lt;script src="js/angular-messages.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-local-storage.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;script src="app/app.js"&gt;&lt;/script&gt;
  
      &lt;script src="app/services/authIntercepterService.js"&gt;&lt;/script&gt;
      &lt;script src="app/services/productService.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="app/controllers/mainAppController.js"&gt;&lt;/script&gt;
      &lt;script src="app/controllers/productsController.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-app="app"&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and Here is product service</p>
  
  <pre><code>app.factory('productService', ['$http', '$q', 'localStorageService', 'ngAuthSettings', function ($http, $q, localStorageService, ngAuthSettings) {
  
      var serviceBase = ngAuthSettings.apiServiceBaseUri;
  
      var productServiceFactory = {};
  
  
      var _getAllDishCategories = function () {
  
          var deferred = $q.defer();
  
          $http({
              method: 'GET',
              url: serviceBase + "api/Product/GetAllDishCategories"
          }).success(function (response) {
  
              deferred.resolve(response);
  
          }).error(function (err, status, header, config) {
  
              deferred.reject(err);
          });
  
          return deferred.promise;
  
      };
  
      var _getProductById = function (productId) {
  
          var deferred = $q.defer();
  
          $http({
              method: 'GET',
              url: serviceBase + "api/Product/GetProductById",
              params: {
                  productId: productId
              }
          }).success(function (response) {
  
              deferred.resolve(response);
  
          }).error(function (err, status, header, config) {
  
              deferred.reject(err);
          });
  
          return deferred.promise;
      };
  
      productServiceFactory.getAllDishCategories = _getAllDishCategories;
      productServiceFactory.getProductById = _getProductById;
  
      return productServiceFactory;
  
  }]);
  </code></pre>
  
  <p>Here is my Web API controller</p>
  
  <pre><code>using FandBClassLibrary;
  using FandBViewModel.Product;
  using System;
  using System.Collections.Generic;
  using System.Configuration;
  using System.Linq;
  using System.Net;
  using System.Net.Http;
  using System.Web.Http;
  
  namespace FandBWebAPI.Controllers
  {
      [RoutePrefix("api/Product")]
      public class ProductController : ApiController
      {
          #region Member variable
  
          private IProductManager productManager;
  
          #endregion
  
          #region Constructor 
  
          public ProductController()
          {
  
          }
  
          public ProductController(IProductManager productManager)
          {
              this.productManager = productManager;
          }
  
          #endregion
  
          #region Post Methods
  
          [HttpGet]
          [Route("GetAllDishCategories")]
          public List&lt;DishCategoryViewModel&gt; GetAllDishCategories()
          {
              var dcList= productManager.GetAllDishCategories();
  
              return dcList;
          }
  
          [HttpGet]
          [Route("GetProductById")]
          public ProductViewModel GetProductById(string productId)
          {
              var productdetails = productManager.GetProductById(productId);
  
              return productdetails;
          }
          #endregion
      }
  }
  </code></pre>
  
  <p>Here I have enable CROS in startup class</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using Microsoft.Owin;
  using Owin;
  
  [assembly: OwinStartup(typeof(FandBWebAPI.Startup))]
  
  namespace FandBWebAPI
  {
      public partial class Startup
      {
          public void Configuration(IAppBuilder app)
          {
              ConfigureAuth(app);
              app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
          }
      }
  }
  </code></pre>
  
  <p>Could someone help me to resolve this issue please?</p>
  
  <p>Thanks,
  Erandika</p>