object XMLHttpRequestProgressEvent error on mobile (Ionic, node.js)

Question

I have a node.js and Ionic (angular) application and when I am trying to make a API call from my phone, I am getting this error -> object XMLHttpRequestProgressEvent

I am serving my Ionic application like this ionic serve --address=10.0.0.107.

It doesnt work on every call from the client only on phone, when I make a call from desktop, everything is fine.

This is login part from auth.service.ts

  loginUser(u: User): Observable<any> {
    const url = `${this.baseUrl}/auth`;
    const body = { username: u.username, password: u.password };

    // When you want to send a cookies with requests,
    // you have to put "withCredentials: true" into request option
    return this.http.post(url, body, this.noAuthOptions);
  }

This is my options:

 private readonly baseUrl = "http://localhost:3000";
 private readonly contentType = { "Content-Type": "application/json" };
 private readonly noAuth = { "No-Auth": "True" };

 private readonly header = new HttpHeaders(this.contentType);
 private readonly noAuthHeader = new HttpHeaders({
    ...this.contentType,
    ...this.noAuth
  });

 private readonly options = { headers: this.header, withCredentials: true };
 private readonly noAuthOptions = {
    headers: this.noAuthHeader,
    withCredentials: true
  };

Here is my code on github (front-end) https://github.com/TenPetr/dashboard and back-end part: https://github.com/TenPetr/dashboard_backend

Do you have any idea, why is this happening?

Thanks for your advices.

Answer 1

The problem is this line:

private readonly baseUrl = "http://localhost:3000";

It works on PC because it knows this address through hosts file (located in C:\Windows\System32\drivers\etc\hosts)

However, mobile devices don't have this file locally so it cannot resolve the url.

You need to run a server and replace the localhost with your IP address. https://ngrok.com/docs#getting-started