Phone 差距和网络服务

Phone Gap and Web Services

我正在尝试使用 PhoneGap 来打包我的应用程序的前端。此应用程序从 javascript 对后端进行 REST 调用。

我在构建过程中使用 PhoneGap Build。我已将 config.xml 文件中的所有域列入白名单,如下所示:<access origin="*" />.

在移动设备 (Android) 上测试应用程序时,除 REST 调用外,所有 html/javascript/css 都能正常工作。我的后端服务器没有任何反应,它部署在我机器上的 Tomcat 上,而且应用程序上的调用似乎超时。

在本地部署整个应用程序(包括前端和后端)后,一切都按预期进行。

这是 javascript 网络服务调用:

$scope.login = function() {
        $log.log($scope.credentials);
        $http.post(navHelp.getContext() + "/login", $scope.credentials).success(
                function(data,status,headers,config) {
                    $log.log( data );                       
                    if(data.loginSuccess === true){                         
                    $location.path('/home');
                    userService.setId(data.employeeId);
                    userService.setAccessToken(data.accessToken);
                    userService.setLoggedIn(true);
                    }

                }).error(function(data){
                    $log.log("Error: " +data);      
                    $scope.error = true;
                });
    };

这是使用 Spark 框架公开的 Java Web 服务:

Bootstrap.getExService().execute(new Runnable(){
        @Override
        public void run() {
            post(API_CONTEXT + "/login", "application/json", 
                    (request,response) -> {

                     //stuff happening

                    }, new JsonTransformer());
        }
    });

我已经在我的防火墙中解锁 tomcat 的端口。 我在 web.xml 中添加了一个 CORS 过滤器。 我已将网络服务请求中的 url 更改为指向服务器。

我错过了什么?欢迎提出建议。提前致谢。

回答了我自己的问题。

解决方案是 two-fold。

第一个: 我需要(?)使用一个名为 ngrok 的工具为我的本地主机提供一个隧道,其中 tomcat 服务器是 运行。 Web 服务调用需要定向到提供的 ngrock url,然后将请求路由到我的 Web 服务器。 我觉得一定有办法解决这个问题,但我不确定它是什么。

第二个: 虽然我的 CORS 过滤器已经设置好,但我需要进一步配置以接受来源为 "file://" 的请求。为此,我将以下标签添加到我的 web.xml 文件中:

<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,OPTIONS,PUT</param-value>
    </init-param>
</filter>

这允许具有任何来源(在请求 header 中指定)的请求通过 CORS 过滤器。

现在我可以在移动设备上(几乎)像在浏览器中一样有效地使用我的应用程序。

我希望这些信息可以帮助那些可能像我一样经历过令人沮丧的人。