angular - 角度 8 中的查询参数问题

Question

我对角度 8 中的查询参数有疑问。这是代码：

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

您将选项作为正文发布。的第三个参数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);

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

Answer 2

我会这样写

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

您需要更改标头对象，不需要 HttpHeader 包装器围绕它

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

顺便说一句：如果您不发送正文，则可能会重新评估是否需要发布请求

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 = {用户名：“用户名”，密码：“密码”}；

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

祝你好运！