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

问题描述

上周的一切都很顺利，虽然我在设备上运行应用程序或者使用Genymotion模拟，所有对api的调用都在工作（返回数据或失败但至少显示一些东西）。

我使用

 离子运行android 
  
 
 
 
我添加更新全球cordova离子：
  npm install -g cordova ionic 
  
因为所有的$ http请求都没有处理。我不能得到任何响应，而Api仍然工作正常，CORS是完全设置。
 
 
 
我发现的唯一的方法是使用选项--livereload或-l：
  ionic run -l android 
  
我想避免任何代价使用livereload。 
 
 
 
我使用离子1.0.0和cordova lib 4.3.0开始创建一个项目。
  angular.module（'starter.controllers'，[]）
 
 .controller（'AppCtrl'，函数（$范围，$ ionicModal，$超时，$ HTTP ）{
 
警报（'调用API'）; 
 //创建一个匿名的access_token 
 $ HTTP 
获得（域+'/ OAuth的/ V2 /令牌？ CLIENT_ID ='+ public_id +'和; client_secret ='+秘密+'和; grant_type = client_credentials'）
。然后（功能（响应）{
警报（response.data.access_token）; 
 }; 
}）
  
所以在使用时：
  ionic serve 
  
 
 
 
 
但是在使用时：
  ionic run android 
  
 但似乎不处理http请求。
 
 
 
有没有人体验过类似的东西？ 
解决方案
随着Cordova 4.0.0的更新，你将面临一个问题，能够对RESTful API进行HTTP调用，并加载外部资源，其中包括其他HTML /视频/音频/图像。 
 
 
 
使用科尔多瓦-plugin-白名单域白名单解决了该问题。 
 
 
 
删除已安装的白名单插件：
  cordova插件remove cordova -plugin-whitelist 
  
通过CLI添加白名单插件：
  cordova插件add cordova-plugin-whitelist 
  
，然后将以下代码行添加到应用程序的根目录中的 config.xml 中：
 
 
 
  ：
 < allow-navigation href =http://example.com/* /> 
  
或：
 code>< allow-navigation href =http：// * / */> 
  
和
 
 
 
  
 <$ c>中的 meta  $ C>< META HTTP-EQUIV =内容安全性政策的内容=默认的src *;花柱-src的'自我''不安全的内联';脚本的src'自我''不安全的内联'不安全-eval'> 
  
此问题的原因：
 
 
 
 From Cordova 4.0.0 for Android's update：
 
 
白名单功能已更新
 
 
 
 
 
 
您需要添加新的cordova插件白名单插件才能继续使用白名单
 
 
 
 
现在支持安全策略（CSP），并且是推荐的白名单方式（请参阅插件自述文件中的详细信息）
 
 
 
 
 
 
 
 
 
这个新的许可清单已增强为更安全的版本，因此即使允许所有要求，即使您使用CSP 
，和可配置，但Legacy白名单行为仍可通过单独的
插件（不推荐）使用。
 
 
 
 
 
 
注意：虽然不是这个版本的一部分，但默认情况下，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屋！