Ionic 2 http.post formdata null values on php server side

Question

I use FormData to send data to the server. I can log in but the values for device and device_token are null on the server side.

Here is the code:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class Auth{

    credentials = {
        username:'',
        password:'',
        token:'',
        device:'ios',
        device_token:'ios'
    }
    headers:any;
    constructor(public http:Http){ 
    }

    Login(credentials)
    {
        let newCredentials: FormData = new FormData();
        newCredentials.append("device",credentials.device);
        newCredentials.append("device_token",credentials.device_token);
        newCredentials.append("username",credentials.username);
        newCredentials.append("password",credentials.password);


        return new Promise((resolve,reject) =>{
            let headers = new Headers();
            headers.append('Content-Type','application/x-www-form-urlencoded');
            console.log("body: "+ "username: " + newCredentials.get("username"));
            console.log("body: "+ "password: " + newCredentials.get("password"));
            console.log("body: "+ "device: " + newCredentials.get("device"));
            console.log("body: "+ "device_token: " + newCredentials.get("device_token"));

            this.headers = {headers}
            this.http.post('http://www.example.com/api/login/',newCredentials,this.headers)
            .map(res => res)
            .subscribe(res=>{
                var resJson = res.json();
                this.credentials.token = resJson.token;
                resolve(res);
            },(err) =>{
                reject(err);
                console.log(err.error);
            });
        });
    }

I have tried with Postman and the values for device and device_token on the server weren't null.

Answer 1

If you use FormData , the request will automatically be multipart/form-data rather than x-www-form-urlencoded even if you set the header explicitly. This will still work if you are willing to handle the multipart form data on the server side, but it's not really necessary unless you're uploading files. Instead you can use URLSearchParams or even just a query string formatted string.

    let newCredentials = new URLSearchParams();
    newCredentials.set("device",credentials.device);
    newCredentials.set("device_token",credentials.device_token);
    newCredentials.set("username",credentials.username);
    newCredentials.set("password",credentials.password);
    newCredentials = newCredentials.toString();

On another note, you don't need to wrap this in a Promise yourself. Instead, I would suggest returning the observable stream from .http.post :

return this.http.post(...props).map(res => res.json()).map(resJson => {
  this.credentials.token = resJson.token;
  return resJson;
});

Now you will have to use .subscribe in whatever code calls the auth.Login method.

If you really want to use promises, you can also use .toPromise() on this.http.post() which will do what your code is already doing now.