Splekke
Splekke

Reputation: 81

Ionic POST: native HTTP returns ERROR null



I'm trying to get a simple app to work on iOS with Ionic.

The app contains a simple button to do a POST request to my servlet located on my server with the function login(username, password).

At first I thought it was a server-side problem so I tried doing a POST via POSTMAN software.
The result was perfect and the response was a JSON.
But when I try to do it on my iPhone, the native http component throws an error where all values are null.

So I'm thinking it has something to do with my typescript code, can you help me out?

My typescript code:

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { TabsPage } from '../tabs/tabs';
    import { HTTP } from '@ionic-native/http';
    import 'rxjs/add/operator/map';
    import { Storage} from '@ionic/storage';
    import { ShareService } from '../../services/share/share';



    @IonicPage()
    @Component({
      selector: 'page-login',
      templateUrl: 'login.html',
    })
    export class LoginPage {

      static readonly SERVER_ADDRESS  = 'http://example.com';

      constructor(public navCtrl: NavController, public navParams: NavParams, private http: HTTP, private storage:Storage, private shareService: ShareService) {
        this.storage.ready().then( () => {
          this.storage.get("user").then( (user) => {
            if( user !== null){
              console.log(shareService.getUserName());
              shareService.setUser(user.firstName,user.lastName,user.username,user.customer);
              this.navCtrl.push(TabsPage);        
            }
          });
        });
      }

      ionViewDidLoad() {
        console.log('ionViewDidLoad LoginPage');
      }

      login(username,password){

        var body = {
          username: username.value,
          password: password.value
        }
        let header:any = {
          'Content-Type': 'application/json'
        }

this.http.setDataSerializer('json');   
this.http.post(LoginPage.SERVER_ADDRESS+'/external/MobileLoginServlet',body,header).then(
          data => {
            var response = JSON.parse(data.data);
            let user = response[0];
            user.customer = 3;
            user.firstname = "Christian";
            user.lastName = "Prellwitz";
            console.log(user);
            this.storage.ready().then( () =>{
               this.storage.set("user",user); 
            });
            this.navCtrl.push(TabsPage);    
          }).catch(error =>{
            console.log(error);
            console.log(error.status);
            console.log(error.error);
            console.log(error.headers);
          });

      }

    }

My Servlet CORS:

response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");

What the http component returns:

[app-scripts] [11:19:53]  console.log: [object Object]
[app-scripts] [11:19:53]  console.log: null
[app-scripts] [11:19:53]  console.log: null
[app-scripts] [11:19:53]  console.log: null


Thanks for your help in advance.

Upvotes: 0

Views: 617

Answers (1)

Splekke
Splekke

Reputation: 81

So it turns out there was something wrong with what i did in the success. It seems like Ionic native HTTP component catches every error that happens within.

Solution is that i changed "let user = response[0];" to "let user = response.data[0];"

Anyway, thanks for your time and help.

Upvotes: 0

Related Questions