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

Question

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

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

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 中，该文件位于应用程序的根目录中：

推荐在文档中：

<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 创建的默认会包含这个插件。

Answer 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>

Answer 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

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

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