angular 8 中的查询参数问题

Question

我在angular8中的查询参数有问题。这是代码：

headers = {
        headers: new HttpHeaders({
            'Content-Type' : 'application/json',
            'Accept': 'application/json'
        })
    };

login(username, password) {

        console.log('login');

        let params = new HttpParams();
        params = params.append('username', username);
        params = params.append('password', password);
        let options = { headers: this.headers, params: params };

        return this.http.post<any>(this.host + 'login', options).pipe(map(data => {

                console.table(data);
                this.setSession(data);
                this.currentUserSubject.next(data.user);

            }));

    }

我也试过了

let params = new HttpParams();
params = params.set('username', username);
params = params.set('password', password);

和

let params = new HttpParams().set('username', username).set('password', password);

和

let params = new HttpParams().append('username', username).append('password', password);

后端服务器获取未定义的用户名和密码，之前我的代码可以正常工作：

 login(username, password) {

    console.log('login');

    return this.http.post<any>('http://localhost:8080/login?username='+username+'&password='+password, 
        {headers:{
            'Content-Type' : 'application/json',
            'Accept': 'application/json'}} 
    ).pipe(map(data => {

        this.setSession(data);
        this.currentUserSubject.next(data.user);

    }));

}

怎么了？谢谢

Answer 1

您正在 post 将选项作为正文。 http.post 的第三个参数应该是选项：

let params = new HttpParams();
params = params.append('username', username);
params = params.append('password', password);

const options = { headers: this.headers, params: params };

return this.http.post<any>(this.host + 'login', null, options);

_{如果没有正文，为什么这是 post？ GET 不是更有意义吗？}

Answer 2

我会这样写

const options = {headers: this.headers, params: {username, password}};
this.http.post<any>(this.host + 'login', null, options);

您需要更改 headers object，不需要 HttpHeader 包装器

headers = {
    'Content-Type' : 'application/json',
    'Accept': 'application/json'
};

顺便说一句：如果您不发送 body 可能会重新评估是否需要 post 请求

Answer 3

如果没有主体，您应该使用 http.get() 方法（即您需要修改 post 的请求方法才能到达后端）。

 return this.http.get<any>(this.host + 'login', options).pipe(map(data => {

            console.table(data);
            this.setSession(data);
            this.currentUserSubject.next(data.user);

        }));

或者如果您想使用 post 方法，则使用 like（但这不是一个好的做法。）

return this.http.post<any>(this.host + 'login', {},options).pipe(map(data => {

        console.table(data);
        this.setSession(data);
        this.currentUserSubject.next(data.user);

    }));

Answer 4

尝试在 url 之后发送 js 对象。例如：

设obj = {用户名:"username",密码:"password"};

this.http.post("your url here",obj).subscribe(你的箭头函数在这里);

祝你好运！

angular 8 中的查询参数问题

issue in query params in angular 8

httprequest

http-parameters

angular