离子电容器Android应用程序无法访问互联网

Question

我有一个 Ionic + Vue 项目，我正在使用 Capacitor 将 Android 平台添加到我的项目中。该应用程序在虚拟设备和我的小米 A2 上都能正确运行，因为它显示了我创建的登录屏幕。但是，当我输入凭据时，它无法连接到我尝试登录的服务器。

这是我的登录方法：

async login() {
      try {
        const response = await axios.post('http://secure.example.com/login', {
          email: this.email,
          password: this.password
        });

        if (response.data.success) {
          const token = response.data.data.token;
          localStorage.setItem('token', token);
          this.showToast('Has iniciado sesión');
          this.$router.push('/Home');
        } else {
          this.showToast('Credenciales inválidas. Inténtalo de nuevo');
        }
      } catch (error) {
        console.error('Error en el login:', error);
        this.showToast('El login ha fallado. Inténtalo de nuevo más tarde');
      }
    },
    showToast(message) {
      this.toast.message = message;
      this.toast.isOpen = true;
    }

详情：

• 虚拟设备上的 Android 版本：Android R。
• 小米 A2 的 Android 版本：Android 10。
• 登录URL使用HTTP协议。
• 我正在使用 Axios（不确定这是否重要）。

我尝试过的事情：

1. 将

   android:usesCleartextTraffic="true"

   添加到

   AndroidManifest.xml

   。

2. 创建

   security_network_config.xml

   文件：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">secure.example.com</domain>
    </domain-config>
</network-security-config>

并添加

<application ... android:networkSecurityConfig="@xml/network_security_config" ...> 

到

AndroidManifest.xml

。

这些对我来说都不起作用。我该怎么办？

注意：我正在努力学习，所以我的代码可能不是最优的或者可能有错误，所以任何详细的答案将非常感激。谢谢！

Answer 1

更新：我设法解决了问题，现在我可以成功登录，并且我的应用程序中的所有内容都运行良好。 这是我发现对我有用的解决方案。 我将此代码片段添加到

capacitor.config.ts

中

import { CapacitorConfig } from '@capacitor/cli';
import { CapacitorHttp, HttpResponse } from '@capacitor/core';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'smart-home-app',
  webDir: 'dist',
  server: {
    androidScheme: 'http',
    cleartext: true,
  },
  android: {
    allowMixedContent: true 
  },
  plugins: {
    CapacitorHttp: {
      enabled: true
    },
  }
};

export default config;

另外，我添加了这一行：

android:usesCleartextTraffic="true"

到

AndroidManifest.xml

。