Cordova/Ionic:在设备上模拟或运行时不处理 $http 请求 [英] Cordova / Ionic : $http request not processing while emulating or running on device

问题描述

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

我正在使用

ionic run android

我添加更新全局cordova ionic:

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('调用api');//创建一个匿名访问令牌$http.get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&grant_type=client_credentials').then(功能(响应){警报(response.data.access_token)；});})

所以在使用时:

离子服务

它正确地提醒正在调用 api"，然后是响应(该示例的 OAuth 访问令牌).

但是在使用时:

ionic run android

它只是提醒正在调用 api"，但似乎没有处理 http 请求.

有人遇到过类似的事情吗?我对此很头疼.

解决方案

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

使用 cordova-plugin-whitelist 将域列入白名单可以解决问题.>

如果已经安装，请删除白名单插件:

cordova 插件移除cordova-plugin-whitelist

通过 CLI 添加白名单插件:

cordova 插件添加cordova-plugin-whitelist

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

推荐在文档中:

或:

和

index.html

中的这个 meta 标签

这个问题的原因:

来自 Cordova 4.0.0 的 Android 更新:

<块引用>

改进了白名单功能

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

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

• 网络请求在没有插件的情况下默认被阻止，所以安装这个插件甚至允许所有请求，即使你是使用 CSP.

• 这个新的白名单得到了增强，更加安全和可配置，但旧白名单行为仍然可以通过单独的插件(不推荐).

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

Everything were going well last week and while i was running the application on device or emulating with Genymotion, all the calls to the api were working (Either returning the data or failing but at least showing something).

I was using

ionic run android

I add to update the global cordova ionic:

npm install -g cordova ionic

Since that all the $http requests are not even processing. I can't get any responses while the Api is still working fine and the CORS are perfectly set.

The only way i found is to use the option --livereload or -l :

ionic run -l android

I want to avoid using the livereload at any cost.

I started to create a project from scratch using ionic 1.0.0 and 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);
      });
})

So while using :

ionic serve

It is correctly alerting 'calling api' then the response (An OAuth access token for that example).

But while using :

ionic run android

It is only alerting 'calling api' but doesn't seem to process the http request.

Did anyone experience something similar? I'm getting big headaches on that.

解决方案

With the update of Cordova 4.0.0, you will face an issue of not being able to make HTTP calls to RESTful APIs and load external resources, which include other HTMLs/video/audio/images.

Whitelisting the domains using cordova-plugin-whitelist solves the issue.

remove whitelist plugin if already installed:

cordova plugin remove cordova-plugin-whitelist

Add the whitelist plugin via CLI:

cordova plugin add cordova-plugin-whitelist

and then add the following line of code to your app's config.xml which is located in your application's root directory:

Reccomended in the documentation:

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

or:

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

and

this meta tag in your index.html

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

The reason for this issue:

From Cordova 4.0.0 for Android's update:

Whitelist functionality is revamped

• You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist

• Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)

• Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are using CSP.

• This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate plugin (not recommended).

Note: while not strictly part of this release, the latest default app created by cordova-cli will include this plugin by default.

这篇关于Cordova/Ionic:在设备上模拟或运行时不处理 $http 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！