如何将 headers 添加到我的 Angular post 请求中？

Question

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

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。

Answer 1

这可能对您有所帮助

let headers = new Headers();
headers.append('Content-Type','application/json');
//post data missing(here you pass email and password)
data= {
"email":email,
"password":password
}
return this.http.post('http://localhost:8000/api/v1/authenticate',data,{ headers: headers})
    .subscribe(
        res =>{
            console.log(res);
        },
        err => {
            console.log(err.message);
        }
    )

Answer 2

传递给 HttpClient.post 的第二个参数表示请求的 body，但您在这里提供 Headers。使用以下内容正确提供 headers：

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

我在 body 的示例中展示了 null，但您可能希望它以某种形式包含 email 和 password 属性。

您还在混合 Http 和 HttpClient。如果您打算使用 HttpClient（这是现在推荐的方法），请放弃 RequestOptions 和 Headers 以支持 HttpHeaders。这变成：

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

其余代码保持不变。您的 createAuthorizationHeader 函数需要使用 return HttpHeaders 的一个实例。这个 class 是不可变的，所以每次调用时 append return 都是一个 new object。从 @angular/common/http.

导入 HttpHeaders

如何将 headers 添加到我的 Angular post 请求中？

How to add headers to my Angular post request?

typescript

angular

angular-httpclient