角: http post方法，如何传递带有“用户名”和“密码”的“Basic Auth”的正文和标头

Question

我在春季启动时实现了宣誓，并且与邮递员一样，登录服务运行良好(生成令牌)，使用以下参数

邮递员:身体：

selected: application/x-www-form-urlencoded

密钥&值

grant_type : password
username : app123
password : app@123

Authorization:

精选:基本八月

Uasename : appsec

密码: secpass

这是很好的工作，但当尝试从角度，它是不工作的。

我尝试使用“const”并设置“var”

1)

const httpOptions = {
  headers : new HttpHeaders({'Content-Type':'application/x-www-form-urlencoded','Username':'appsec','Password':'secpass'})
};

export class AuthenticationService {

  login(username: string, password: string, grant_type:"password") {

    return this.http.post<any>(`http://localhost:9191/oauth/token`, { username, password, grant_type} ,{ headers:httpOptions})

}

2)

login(username: string, password: string, grant_type:string) {

    var reqHeader = new HttpHeaders({'context-Type':'application/x-www-form-urlencoded','Basic Auth':'True','Username':'appsec','Password':'secpass'});

    return this.http.post<any>(`http://localhost:9191/oauth/token`, { username, password, grant_type} ,{ headers:reqHeader})
}

在标题部分中，错误为

reqHeader = HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}

Answer 1

1) Wtih 'Content-Type'：‘application/x form-urlencoded’，您必须发送字符串体：

 const body = JSON.stringify({username: userName, password: password, grant_type:grant_type });

2)要检查控制台中的标题，请尝试点击以下命令：

req.headers.keys();

干杯(y)

Answer 2

在标题中：

var reqHeader = new HttpHeaders({'context-Type':'application/x-www-form-urlencoded','Basic Auth':'True','Username':'appsec','Password':'secpass'});

请尝试：

var reqHeader = new HttpHeaders({'Content-Type':'application/x-www-form-urlencoded','Basic Auth':'True','Username':'appsec','Password':'secpass'});

因为：“上下文-类型”不是有效的标题。

另外，我不知道为什么要在头和正文中设置用户凭据，在主体中设置凭据(用户名、密码、授予)就足够了。

Answer 3

您应该在Authorization中添加HttpHeaders作为Basic Auth。

new HttpHeaders({
 'Content-Type': 'application/x-www-form-urlencoded',
 'Authorization', 'Basic ' + btoa('appsec:secpass')
})