当前位置: 首页 > 面试题库 >

Cordova / Ionic:仿真或在设备上运行时,$ http请求未处理

慕容弘懿
2023-03-14
问题内容

上周一切运行良好,当我在设备上运行应用程序或使用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('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请求。

有人经历过类似的事情吗?我对此感到非常头疼。


问题答案:

随着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 ,该文件位于应用程序的根目录中:

Reccomended 的文件中:

<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'">

此问题的原因:

从适用于Android的更新的Cordova 4.0.0:

改进了白名单功能

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

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

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

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

注意:虽然不是严格意义上的发行版,但cordova-cli创建的最新默认应用程序默认将包含此插件。



 类似资料: