Angular5 HttpClient send data but server can not understand its params

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?

erosb · Accepted Answer · 2018-02-26 10:58:01Z

3

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");

answered Feb 26, 2018 at 10:58

erosb

3,17118 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular5 HttpClient send data but server can not understand its params

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related