Angular5 HttpClient 发送数据但服务器无法理解其参数

Question

当我提交常规 HTML 表单时，我的 back-end 服务（用 Laravel 编写）可以理解 POST 参数。

我在浏览器中检查了请求 header。请求参数为：

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

然后我写了下面的方法通过angular5向服务器发送post请求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())
    );
}

但是浏览器会显示不同的表单数据，如下所示：

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

我传递了以下 object 作为数据：

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

但是服务器（Laravel）无法理解请求参数。请让我知道它有什么问题？

Answer 1

您的 data 应该是一个 FormData 实例而不是一个普通对象（它将是 json-encoded）。示例：

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

Angular5 HttpClient 发送数据但服务器无法理解其参数

Angular5 HttpClient send data but server can not understand its params

http

angular

angular-httpclient

angular5