使用 httpClient 的 post 方法在 url 中传递参数

Question

我需要在 url 中发送一封电子邮件作为 http 参数。我使用邮递员尝试了同样的事情，并且代码工作正常，但是使用以下角度代码，它不会将电子邮件参数添加到 url。我使用 Angular 7 作为前端。

http://localhost:8090/api/auth/forgot?email=abcd@gmail.com

使用邮递员和上述网址时，电子邮件将发送到abcd@gmail.com。

下面是前端代码

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PasswordInfo } from './password-info';

@Injectable({
  providedIn: 'root'
})
export class ResetPswdEmailService {

  constructor(private http: HttpClient) { }

  sendemail( emailinfo : String){//emailinfo is the email address
    let data = {email: emailinfo};
    return this.http.post<any>('http://localhost:8090/api/auth/forgot', {params:data});
  }


}

组件部分代码

import { Component, OnInit } from '@angular/core';
import { ResetPswdEmailService } from '../Service/reset-pswd-email.service';

@Component({
  selector: 'app-forgotpassword',
  templateUrl: './forgotpassword.component.html',
  styleUrls: ['./forgotpassword.component.css']
})
export class ForgotpasswordComponent implements OnInit {

  constructor(private resetpswdemailservice : ResetPswdEmailService) { }

  mail : string;

  ngOnInit() {
  }

  onSubmit() {
    this.resetpswdemailservice.sendemail(this.mail)
    .subscribe(result =>{
    console.log(result);
    });
  }

}

控制台出错

http://localhost:8090/api/auth/forgot 400


HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "http://localhost:8090/api/auth/forgot", ok: false, …}
error: {timestamp: "2019-05-07T10:53:58.230+0000", status: 400, error: "Bad Request", message: "Required String parameter 'email' is not present", path: "/api/auth/forgot"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:8090/api/auth/forgot: 400 OK"
name: "HttpErrorResponse"
ok: false
status: 400
statusText: "OK"
url: "http://localhost:8090/api/auth/forgot"

好像参数没有加到url里。

我在 http 正文中发送了电子邮件，它工作正常。电子邮件已送达。所以这里的问题是设置参数。

提前谢谢你。

Answer 1

我认为您想将电子邮件作为查询参数而不是请求正文发送，因此您必须这样做：

sendemail( emailinfo : String){//emailinfo is the email address
   let data = {email: emailinfo};
   return this.http.post<any>('http://localhost:8090/api/auth/forgot', null, {params:data});
}

否则，如果这是您想要的，您需要知道这不是使用 POST 方法的正确方法，因为发布数据意味着使用正文，因此您使用的是 GET 方法。

Answer 2

你可以试试这个：

let params = new HttpParams();
params = Params.append('email', emailInfo);

return this.http.post<any>(`http://localhost:8090/api/auth/forgot`, { params: params });

Answer 3

如果您的请求已发布。改成这样：

return this.http.post<any>(`http://localhost:8090/api/auth/forgot`, {email: emailinfo});