Cordova/Ionic:$ http请求在设备上模拟或运行时不进行处理

Question

上周一切顺利,当我在设备上运行应用程序或使用Genymotion进行模拟时,所有对api的调用都在工作(要么返回数据,要么失败但至少显示一些内容).

我在用

ionic run android

我添加更新全球cordova离子:

npm install -g cordova ionic

因为所有$ http请求都没有处理.当Api仍然正常工作并且CORS完美设置时,我无法得到任何响应.

我找到的唯一方法是使用选项--livereload或-l:

ionic run -l android

我想避免不惜任何代价使用livereload.

我开始使用ionic 1.0.0和cordova lib 4.3.0从头开始创建一个项目.

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout, $http) {

  alert('calling api');
  // Create an anonymous access_token
  $http
      .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&grant_type=client_credentials')
      .then(function(response){
          alert(response.data.access_token);
      });
})

所以在使用时:

ionic serve

它正确地警告"调用api"然后响应(该示例的OAuth访问令牌).

但在使用时:

ionic run android

它仅警告'调用api'但似乎不处理http请求.

有人经历过类似的事吗？我对此感到非常头疼.

Answer 1

随着Cordova 4.0.0的更新,您将面临无法对RESTful API进行HTTP调用以及加载外部资源(包括其他HTML /视频/音频/图像)的问题.

使用cordova-plugin-whitelist将域列入白名单解决了这个问题.

删除白名单插件(如果已安装):

cordova plugin remove cordova-plugin-whitelist

通过CLI添加白名单插件:

cordova plugin add cordova-plugin-whitelist

然后将以下代码行添加到应用程序的config.xml中,该config.xml位于应用程序的根目录中:

建议在文档中:

<allow-navigation href="http://example.com/*" />

要么:

<allow-navigation href="http://*/*" />

和

这个meta标签在你的index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

这个问题的原因:

来自Cordova 4.0.0 for Android的更新:

白名单功能得到了改进

• 您需要添加新的cordova-plugin-whitelist插件才能继续使用白名单

• 现在支持设置内容安全策略(CSP),这是白名单的推荐方法(请参阅插件自述文件中的详细信息)

• 默认情况下,网络请求在没有插件的情况下被阻止,因此安装此插件甚至允许所有请求,即使您使用的是CSP.

• 此新白名单已增强为更安全和可配置,但旧版白名单行为仍可通过单独的插件(不推荐)使用.

注意:虽然不是此版本的严格部分,但cordova-cli创建的最新默认应用程序默认包含此插件.

Answer 2

当我尝试以下时,它对我有用...

在Config.xml中,允许访问和导航到您的域:

<access origin="http://yourdomain1.com" />
<allow-navigation href="http://yourdomain1.com"/>

然后在index.html中,添加Content-Security-Policy,如下所示:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://yourdomain1.com  data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline';  media-src *;  script-src 'self' 'unsafe-eval' 'unsafe-inline';">