当 运行 应用程序在 Android 模拟器上时，如何在 Ionic React 应用程序中使用社区 HTTP 插件？

Question

我正在 Capacitor 之上开发 Ionic React 应用程序 运行。它适用于浏览器中的 axios 请求，但在 Android 上我有 CORS 问题，这就是为什么我使用 community HTTP plugin:https://github.com/capacitor-community/http

示例：我单击“登录”按钮。我的电子邮件和密码等数据应该通过 HTTP post 发送，但它捕获了我放在那里的错误：再试一次。

你知道为什么会这样吗？

也没有关于 Android Studio 上的请求的错误日志。只有这些：

    /system_process E/ClipboardService: Denying clipboard access to com.google.android.googlequicksearchbox, application is not in focus nor is it a system service for user 0
    E/netmgr: qemu_pipe_open_ns:62: Could not connect to the ‘pipe:qemud:network’ service: Invalid argument
    E/netmgr: Failed to open QEMU pipe ‘qemud:network’: Invalid argument
    E/wifi_forwarder: qemu_pipe_open_ns:62: Could not connect to the ‘pipe:qemud:wififorward’ service: Invalid argument
    E/wifi_forwarder: RemoteConnection failed to initialize: RemoteConnection failed to open pipe

为了解决这些错误，我在 application 元素中添加了这个设置：

    android:usesCleartextTraffic=“true”

但错误仍然存​​在。

Android 模拟器已连接到 Internet。

<!-- Permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
 <!-- Network API -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Login.tsx:

import React from "react";
import { useHistory } from "react-router-dom";
import { useState, useContext } from "react";
import MyContext from "../my-context";
import {
  IonPage,
  IonHeader,
  IonContent,
  IonButton,
  IonInput,
  IonLabel,
  IonItem,
  IonGrid,
  IonCol,
  IonAlert,
} from "@ionic/react";
import { Http, HttpResponse } from "@capacitor-community/http";

const Login = () => {
  const history = useHistory();
  const {
    email,
    setEmail,
    password, 
    setPassword
  } = useContext(MyContext);

     const doLogin = async (e: any) => {
    e.preventDefault();

    const loginData = {
      email: email,
      password: password,
    };

    //https://github.com/capacitor-community/http
    const options = {
      url: "https://xx/login,
      data: loginData,
    };
    const response: HttpResponse = await Http.post(options)

      .then((response) => {

        if (response.data.token) {
          history.push("/home");
          window.location.reload();
        }
        return response.data;
      })
      .catch((error) => {
        setMessage(
          "Try again!"
        );
      setIserror(true);
      });
    };

return (
    <IonPage>
      <IonContent className="ion-padding ion-text-center">
        <IonGrid>
          <IonRow>
            <IonCol>
              <IonAlert
                isOpen={iserror}
                onDidDismiss={() => setIserror(false)}
                header={"Info!"}
                message={message}
                buttons={["Ok"]}
              />
            </IonCol>
          </IonRow>
         
                <h1>Login</h1>
              </IonCardTitle>
          
              <IonItem>
                <IonLabel position="floating">Email</IonLabel>
                <IonInput
                  name="email"
                  type="email"
                  value={email}
                  onIonChange={(e) => setEmail(e.detail.value!)}
                />
              </IonItem>

              <IonItem>
                <IonLabel position="floating">Password</IonLabel>
                <IonInput
                  name="password"
                  type="password"
                  value={password}
                  onIonChange={(e) => setPassword(e.detail.value!)}
                />
              </IonItem>
             
              <IonButton onClick={doLogin}>Login</IonButton>
             
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};

export default Login;

我被这个问题困扰了 3 天，所以非常非常感谢任何帮助。谢谢！

Answer 1

服务器是否收到HTTP请求？可以尝试打印log进行判断。

以便我们可以进行下一步

Answer 2

对于任何感兴趣的人，我找到了解决方案。在此文档中 https://github.com/capacitor-community/http，Android 的配置丢失。

1- 因此，在 android\app\src\main\java\MainActivity.java

中导入和 add http plugin

package com.myapp.com;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;
import com.getcapacitor.plugin.http.Http; //added

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(Http.class); //added
    }});
  }
}

2- 在 Android Studio 中同步 gradle 个文件：

File --> Sync Project with Gradle Files

我根据需要写了请求，现在完美运行了。