Web API 调用在设备模式下失败但在 Cordova 的模拟器中工作

Question

在我的项目中，我在云服务器中部署了我的网络 api 并从该服务获取数据。在 ripple 模拟器中，它运行完美。但是当我在设备模式（Android 选项卡）中调试时，可以调用 service.It 也没有显示任何特定的错误消息。

在我的 index.html 页面上

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>

    <script src="lib/ng-cordova.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!--angularJS local storage-->
    <script src="js/angular-messages.min.js"></script>
    <script src="js/angular-local-storage.min.js"></script>

    <!-- your app's js -->
    <script src="app/app.js"></script>

    <script src="app/services/authIntercepterService.js"></script>
    <script src="app/services/productService.js"></script>


    <script src="app/controllers/mainAppController.js"></script>
    <script src="app/controllers/productsController.js"></script>

</head>
<body ng-app="app">
    <ion-nav-view></ion-nav-view>
</body>
</html>

这是产品服务

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;

}]);

这是我的 Web API 控制器

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<DishCategoryViewModel> GetAllDishCategories()
        {
            var dcList= productManager.GetAllDishCategories();

            return dcList;
        }

        [HttpGet]
        [Route("GetProductById")]
        public ProductViewModel GetProductById(string productId)
        {
            var productdetails = productManager.GetProductById(productId);

            return productdetails;
        }
        #endregion
    }
}

这里我在启动时启用了CROS class

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);
        }
    }
}

有人可以帮我解决这个问题吗？

谢谢，埃兰迪卡

Answer 1

如果您的网站 API 托管在本地，则很难从您的设备访问它。

最好的办法是将您的 Web API 放在在线域上，这样您就可以通过 WWW 访问它。

例如：

您目前可能使用的是：http://localhost:port/api/movies

如果您有一个网站和一个允许访问互联网的应用程序，您可以执行以下操作：http://yourwebsite.com/api/movies。

更多问题给我留言。

祝你好运！

Answer 2

我必须安装白名单插件。之后它开始工作。您可以使用以下命令安装插件。要在命令提示符下执行此操作，请转到您的项目文件夹并执行以下命令。

cordova 插件添加 cordova-plugin-whitelist

更多信息请参考此URL

谢谢，埃兰迪卡

Web API 调用在设备模式下失败但在 Cordova 的模拟器中工作

Web API call failed in device mode but working in emulater in Cordova

android

angularjs

cordova

asp.net-web-api2