gpt4 book ai didi

angular - 如何将 header 添加到我的 Angular 发布请求中?

转载 作者:太空狗 更新时间:2023-10-29 17:05:56 24 4
gpt4 key购买 nike

对于一个学校项目,我需要使用 Angular 制作一个简单的登录页面。单击登录按钮时,我需要在我的帖子中添加授权 header 。我创建了一个后端,当我使用 postman 将授权值发布到该后端时,它可以正常工作,因此后端没有任何问题。当我尝试使用我的前端发布到同一个后端时,它不起作用。向帖子添加标题的最佳方法是什么?看来意见不一。这是我的代码:

export class LoginComponent{
title = 'Login';
email = '';
password = '';
credentials = '';
basic = '';
constructor(private http:HttpClient){

}

createAuthorizationHeader(headers:Headers,basic){
headers.append('Authorization',basic);
}

login(event){
this.email = (<HTMLInputElement>document.getElementById("email")).value;
this.password = (<HTMLInputElement>document.getElementById("password")).value;
this.credentials = this.email + ":" + this.password;
this.basic = "Basic " + btoa(this.credentials);
console.log(this.basic);
let headers = new Headers();
headers.append('Content-Type','application/json');
headers.append('Authorization',this.basic);
let options = new RequestOptions({headers:headers});
console.log(headers);
return this.http.post('http://localhost:8000/api/v1/authenticate',options)
.subscribe(
res =>{
console.log(res);
},
err => {
console.log(err.message);
}
)
}
}

当我运行该代码时,我收到 400 状态响应并且未添加 header 。

最佳答案

传递给 HttpClient.post 的第二个参数代表请求的正文,但您在这里提供 header 。使用以下内容正确提供 header :

return this.http.post('http://localhost:8000/api/v1/authenticate', null, options);

我在正文的示例中显示了 null,但您可能希望在某些内容中包含 emailpassword 属性形式。

您还混合了 HttpHttpClient。如果您打算使用 HttpClient(这是现在推荐的方法),请删除 RequestOptionsHeaders 以支持 HttpHeaders .这变成:

let headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': this.basic });
let options = { headers: headers };

其余代码保持不变。您的 createAuthorizationHeader 函数需要使用并返回 HttpHeaders 的实例。此类是不可变的,因此 append 每次被调用时都会返回一个新对象。从 @angular/common/http 导入 HttpHeaders

关于angular - 如何将 header 添加到我的 Angular 发布请求中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47757655/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com