My Ionic button handles a local request (http://localhost/login) on Android emulator instead of https://xx.xx.xx/login

I have developed an Ionic React app , running on top of Capacitor . In browser everything runs smoothly (ionic serve).

Now I’m trying to run my app on an Android emulator , but my login button is not working. I click on it and nothing happens. In LogCat I see this log when I click on the button:

/io.ionic.starter D/Capacitor: Handling local request: http://localhost/login

In order to solve CORS issues, in package.json I’m using a proxy: "proxy": "https://xx.xx.xx",

In Login Component, I’m calling a POST axios request in order to login with cardNumber and birthday.

Login Component:

import React from "react";
import { useHistory } from "react-router-dom";
import { useState, useContext } from "react";
import axios from "axios";
import {
  ...
} from "@ionic/react";

const Login = () => {
  const history = useHistory();
  const {
    cardNumber,
    setCardNumber,
    birthday,
    setBirthday,
    iserror,
    setIserror,
    message,
    setMessage,
  } = useContext(MyContext);

  const doLoginwithBirthday = (e: any) => {
    e.preventDefault();
    setIserror(false);

    const data = {
      cardNr: cardNumber,
      birthDate: birthday,
    };
    

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

  return (
    <IonPage>
      <IonHeader></IonHeader>
      <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>
            
              <IonItem>
                <IonLabel position="floating">Card Number</IonLabel>
                <IonInput
                  name="cardNumber"
                  type="number"
                  value={cardNumber}
                  onIonChange={(e) => setCardNumber(e.detail.value!)}
                />
              </IonItem>

             
              <IonItem>
                <IonLabel position="floating">Birthday</IonLabel>
                <IonInput
                  name="birthday"
                  type="text"
                  value={birthday}
                  onIonChange={(e) => setBirthday(e.detail.value!)}
                />
              </IonItem>
              <br />
              <IonButton onClick={doLoginwithBirthday}>Login</IonButton>
             
              <IonItem
                lines="none"
                routerLink="/register"
                class="ion-text-right"
              >
                <IonLabel>Register</IonLabel>
              </IonItem>
           
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};
export default Login;

How is it possible that clicking the Login button handles the request: http://localhost/login instead of https://xx.xx.xx/login ?

Should I change anything on Android ?

capacitor.config.json

{
  "appId": "io.ionic.starter",
  "appName": "testApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

1 post - 1 participant

Read full topic