Getting error when trying to log into ionic capacitor app in an android studio emulator

Question

I get this error when trying to log into my ionic capacitor app: "D/Capacitor: Handling local request: http://localhost/login"

• the react app uses https
• it connects to a remote server

I made a capacitor compiled ionic app and am trying to debug it in android studio. To make this app, I wanted to convert my web app into an android app. I did the following steps in my project:

1. I created a capacitor.json file and an ionic.config.json file
2. I did npm run build and ionic build commands
3. Installed ionic globally to machine: npm install -g @ionic/cli
4. Installed capacitor to my project: npm install @capacitor/core --save
5. Did command to create an android app with existing react app: ionic capacitor add android
6. npx cap copy command
7. npx cap open android (in android studio)

I used an emulator within the android app that was:

• API level 29
• Android level 10

System:

• capacitor: 2.4.5
• ionic: 6.12.3
• android version: 10
• Java: 18.9

Here is the login handling for the Login.jsx page:

i

mport React, { Component } from 'react';
import sessionApi from '../../api/session';
import wifihome from '../../resources/images/wifihome.png';
import './Login.css';

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pid: '',
      password: '',
      loginError: '',
    };

    this.sessionApi = sessionApi;

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    // target = event element, dynamic key should be surrounded by []
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit(event) {
    const { pid, password } = this.state;

    // post: returns a promise object
    // a promise object handles the response
    this.sessionApi.post(
      '/login',
      {
        pid,
        password,
      },
    ).then((response) => {
      if (response.data.loggedIn) {
        const { handleSuccessfulAuth } = this.props;

        handleSuccessfulAuth(response.data);
      }
    }).catch((error) => {
      this.setState({ loginError: error.message });
      console.error('login error', error);
    });

    event.preventDefault();
  }


 

Answer 1

等待大神答复