【问题标题】:Web API call failed in device mode but working in emulater in CordovaWeb API 调用在设备模式下失败,但在 Cordova 的模拟器中工作
【发布时间】:2015-07-29 11:05:04
【问题描述】:

在我的项目中,我已经在云服务器中部署了我的 web api,并从该服务中获取数据。在纹波模拟器中它工作得很好。但是当我在设备模式(Android选项卡)下调试时,它可以调用服务。它也没有显示任何特定的错误消息。

在我的 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

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

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

谢谢, 厄兰蒂卡

【问题讨论】:

    标签: android angularjs cordova asp.net-web-api2


    【解决方案1】:

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

    cordova插件添加cordova-plugin-whitelist

    更多信息请参考URL

    谢谢, 厄兰蒂卡。

    【讨论】:

    • 感谢您发布答案,它也解决了我的问题!
    • 现在cordova 10 不支持这个插件
    【解决方案2】:

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

    您能做的最好的事情是将您的 Web API 放在一个在线域上,这样您就可以通过 WWW 访问它。

    例如:

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

    如果您有网站和应用程序可以访问互联网,您可以这样做:http://yourwebsite.com/api/movies

    更多问题可以给我留言。

    祝你好运!

    【讨论】:

    • 嗨 Gio,我的网络服务已经托管在云中,所以我已经有了所需的 url 格式。问题是我必须将白名单插件安装到我的项目中。之后它开始工作。无论如何感谢您的帮助。
    猜你喜欢
    • 2012-05-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-01
    • 2023-03-24
    • 1970-01-01
    相关资源
    最近更新 更多