Angular5 HttpClient send data but server can not u

Question

When I submit a regular HTML form, My back-end service ( written in Laravel ) can understand POST parameters.

I checked the request header in the browser. Request parameters are:

Form Data:
    _token:v4xCN9fHMpZhoQMGHfbqI01XDsQ1nCxYhy3RDrw5
    username:root
    password:123456

Then I wrote the following method to send a post request to the server via angular5 HttpClient:

public post(url: string, data: any): Observable<any[]> {
    const headers = new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
    return this.http.post( url, data,
        {
            headers: headers
        }
    ).pipe(
        tap(success => this.handleSuccess(success)),
        catchError(this.handleError())
    );
}

But browser displays a different Form Data like this:

Form Data:
    {"username":"asdf","password":"asdf","_token":"mytoken"}:

I passed the following object as data:

    data = {
        username: 'asdf',
        password: 'asdf',
        _token: 'mytoken'
    };

But server ( Laravel ) could not understand request parameters. Please let me know what is wrong with it?

Answer 1

Your data should be a FormData instance instead of a plain object (which will be json-encoded). Example:

const data = new FormData();
data.append("username", "asdf");
data.append("password", "asdf");
data.append("_token", "mytoken");