Ionic 4 - XMLHttpRequest throw error

Ionic Framework Ionic Angular
1

Hi everyone,

I am using ionic 4, for login I am using above code. This code was working in real test android devices which have apk already but today code is triggered onerror with 0 error status. I tried in different android device, everything is okey. Can you help me?
in real

  login() {
    this.isSubmitted = true;
    if (!this.loginModel.isValid()) return;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", server_url2 + "/oauth/token", true);
    xhr.withCredentials = false;
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    var requestParams = "grant_type=password&username=" + encodeURIComponent(this.loginModel.username) + "&password=" + encodeURIComponent(this.loginModel.password);
    this.loadingService.showLoader(this.loading);
    xhr.send(requestParams);
    xhr.onload = () => {
      if (xhr.status == 200) {
        let response = JSON.parse(xhr.responseText);
        this.storage.set("token", response['access_token']);
        //localStorage.setItem("token", response['access_token']);
        if (this.loginModel.username === "halim.terzioglu" || this.loginModel.username === "gorkem.azder"
          || this.loginModel.username === "ngssrgunaydin") {
          this.isAdmin = true;
          localStorage.setItem("adminUser", this.loginModel.username);
          this.appPages.push({
            header: 'Test News',
            url: '/news-test',
            icon: '../theme/icons/menu/ic-map-off.svg',
            selectedIcon: '../theme/icons/menu/ic-map-active.svg',
            expanded: false,
          });
        }
        this.isLogged = true;
        this.show = true;
        this.loadingService.hideLoader();
        this.router.navigateByUrl("/home");
      }
      else {
        //localStorage.removeItem('token');
        this.storage.remove("token");
        localStorage.removeItem('adminUser');
        this.loadingService.hideLoader();
        this.alertService.showAlert("Something went wrong", "Username or password is incorrect.");
      }
    };
    xhr.onerror = () => {
      this.loadingService.hideLoader();
      this.alertService.showAlert('Please check your connection!', '');
    }
    
    return;
  }
2

Developer-console is your friend…
Checkout your http-request and response and it tells you more details about the error…

3

This code runs successfully in the browser. Also some devices which apk uploaded, runs codes without any error but device like Huawei p30 (also it is our test device) has this stuation

4

Sorry I’m new in mobile development on Ionic…
But for me you have to find what is causing the problem…client or server.

In that case you have to trace your response/request with your native IDE to find it out.
In your case XCode.

Your code is too less information to find out what’s the problem could be.

5

Make sure your endpoint is https, not http.

Incidentally, why aren’t you using Angular’s HttpClient instead of micromanaging all this XHR stuff?

I’m also nervous about the hardcoded admin usernames and the possibility that you’re relying on that for security.

6

Yes, I thought this as well, but at the end nobody is required to use Angular…
We have to assume that some are developing in plain js without any framework like Angular :wink: for whatever reason…
That’s why I didn’t question it…
But I totally agree your concerns…

7

I would hope those people would choose to post elsewhere than the Angular subcategory, which was part of the point of my question - is this thread in the right place?

8

Yes you are right. I didn’t recognize that this thread is assigned to the ‘Angular’ subcategory.
In that case I would also highly suggest to refactor the code first in Angular way (using HttpClient) to make an request.

Maybe a lot of things are solved automatically then :wink: