Ionic native http plugin error

Ionic Native
1

Hello, I’m trying to make http request using Ionic native http plugin.
i send the request like this:

this.login = {
      Username: this.loginForm.value.userName,
      Password: this.loginForm.value.password
    };
    this.http.setDataSerializer("json");
    console.log(this.connection.baseUrl);
    this.http.post(`${this.connection.baseUrl}/LogOn/LogInMobile`, this.login, {
      "content-type": "application/json",
      "Accept": 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Content-Type',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS'
    }).then(data => {
      let resp = JSON.parse(data.data);
      console.log('resp', data);
      if (resp.data.check === true) {
        this.storage.set('userId', resp.Id);
        this.storage.set('branchId', resp.branch);
        this.navCtrl.setRoot(StartPage);
        loader.dismiss();
      }
      else {
        let message = "error 1";
        this.errorMessage.errMsg(message);
        loader.dismiss();
      }
    }).catch(err => {
      console.log(err);
      this.errorMessage.errMsg('error 2');
      loader.dismiss();
    });

but i always get this error on catch()

{
  "status": 404,
  "url": "http://18.203.73.18/(X(1)S(ww3cebzqmh0c3urdr42gfwrp))/Error/NotFound?aspxerrorpath=/LogOn/LogInMobile",
  "headers": {
    "okhttp-response-source": "NETWORK 404",
    "cache-control": "private",
    "access-control-allow-headers": "Content-Type",
    "x-aspnetmvc-version": "5.2",
    "content-type": "text/html",
    "server": "Microsoft-IIS/8.5",
    "date": "Thu, 29 Nov 2018 09:17:19 GMT",
    "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
    "content-length": "1245",
    "x-powered-by": "ASP.NET",
    "x-aspnet-version": "4.0.30319",
    "access-control-allow-origin": "*",
    "okhttp-selected-protocol": "http/1.1"
  },
  "error": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"/>\r\n<title>404 - File or directory not found.</title>\r\n<style type=\"text/css\">\r\n<!--\r\nbody{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}\r\nfieldset{padding:0 15px 10px 15px;} \r\nh1{font-size:2.4em;margin:0;color:#FFF;}\r\nh2{font-size:1.7em;margin:0;color:#CC0000;} \r\nh3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} \r\n#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:\"trebuchet MS\", Verdana, sans-serif;color:#FFF;\r\nbackground-color:#555555;}\r\n#content{margin:0 0 0 2%;position:relative;}\r\n.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}\r\n-->\r\n</style>\r\n</head>\r\n<body>\r\n<div id=\"header\"><h1>Server Error</h1></div>\r\n<div id=\"content\">\r\n <div class=\"content-container\"><fieldset>\r\n  <h2>404 - File or directory not found.</h2>\r\n  <h3>The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.</h3>\r\n </fieldset></div>\r\n</div>\r\n</body>\r\n</html>\r\n"
}

This request is working well on Postman.

2

Hi @aboelhaithem!

Is there any reason why you’re using the HTTP plugin instead of the browser’s XHR or Angular’s HttpClient? Also, the Access-Control headers needed for CORS need to be returned by the server, not sent by the client :wink:

In any case, your server is returning 404 Not Found so you might not be sending the requests to the right endpoint.

Best,
Rodrigo

3

First I’d like to thank you. I was using the angular http client first but i faced a problem with CORS and many solutions referred to use Ionic native http instead of angular http and that already worked for me, but when i tried to convert the login function i faced this problem.
What i want to say that the ionic native plugin works well with another post requests.
The 404 url which in the error is not the url which i call.
This request works well on postman.

sincerely,

4

as a test, try to hard code the url instead of doing this:
${this.connection.baseUrl}/LogOn/LogInMobile

this may be your problem.