Cordova / Ionic：在设备上模拟或运行时未处理 $http 请求

Posted

技术标签:

【中文标题】Cordova / Ionic：在设备上模拟或运行时未处理 $http 请求【英文标题】：Cordova / Ionic : $http request not processing while emulating or running on device 【发布时间】：2015-07-31 07:29:23 【问题描述】：

上周一切顺利，当我在设备上运行应用程序或使用 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 请求。

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

【问题讨论】：

看看这个答案是否对你有帮助：***.com/a/29916802/4412363 谢谢你，我现在试试，然后回复你。 好的，这正在工作！那么你想写一个链接到这篇文章的答案我很乐意验证它。 其实是重复的，但是你的问题本质上比较具体，这会导致人们在搜索这个问题时找到它，所以我将答案添加为Community Wiki。 对于使用cordova 6.3.0 的我，我必须修改发出网络请求的.html 文件的<meta>。如下，<meta http-equiv="Content-Security-Policy" content="default-src 'self' * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">。我在'self' 之后添加* 然后它工作。或者更具体一些，但我也必须具体指定协议，即https://yourdomain.com 并替换为*。 【参考方案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 中，该文件位于应用程序的根目录中：

推荐在文档中：

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

或：

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

和

index.html 中的这个 meta 标记

<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 插件才能继续使用白名单

现在支持设置 Content-Security-Policy (CSP)，并且是推荐的白名单方式（请参阅插件自述文件中的详细信息）

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

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

注意：虽然严格来说不是此版本的一部分，但最新的默认应用 由 cordova-cli 创建的默认会包含这个插件。

【讨论】：

这样开放安全性是不是有点过分了？为什么我必须启用unsafe-inline 和unsafe-evals？ 我已经修改了我的答案-我们也可以添加&lt;allow-navigation href="http://example.com/*" /&gt;，这是文档中推荐的。 删除cordova-plugin-whitelist并重新添加白名单解决了我的问题，没有任何代码更改......并且白名单是相同的版本......天哪...... 以上都不适合我，然后我发现问题出在http apis（https apis正在工作），知道吗？ ***.com/questions/58384888/…【参考方案2】：

这是一个与网络安全相关的问题。要解决此问题，请替换 resource/android/xml/network_security_config.xml

与，

<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain>api.mydomain.in</domain>
    </domain-config>
</network-security-config>

【讨论】：

【参考方案3】：

如果你向非 https url 发送 http 请求，那么请确保你已经添加了

android:usesCleartextTraffic="true"

在 AndroidManifest.xml 中

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

其他选项请查看answer

【讨论】：

【参考方案4】：

我在使用 ionic 应用时遇到了同样的问题。在我的情况下，Android 应用程序在我的手机上运行良好，但它没有在其他团队成员的手机上进行 http 调用。

使用 chrome://inspect#devices 调试设备后。我开始知道确切的错误。 在 HTTP 调用期间，应用程序出现 ERR_CLEARTEXT_NOT_PERMITTED 错误。

我使用下面的链接允许在我的 playpen 中的 AndroidManifest.xml 文件中以明文格式发送数据。 https://forum.ionicframework.com/t/err-cleartext-not-permitted-in-debug-app-on-android/164101

【讨论】：

【参考方案5】：

当我尝试以下操作时，它对我有用……

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

【讨论】：

以上是关于Cordova / Ionic：在设备上模拟或运行时未处理 $http 请求的主要内容，如果未能解决你的问题，请参考以下文章

Ionic 3 cordova 遇到设备/模拟器错误 [Android]

没有 Ionic 的设备上的 Cordova 热重载

所有原生 cordova 插件都停止在 Ionic3 上工作

Ionic Cordova 应用程序无法在 android 9 设备上运行

vs2015 ionic cordova ios模拟器中没有图标

Xcode 设备列表在 ionic/cordova 项目中为空