如何将标题添加到我的Angular post请求中？(How to add headers to my Angular post request?)

如何将标题添加到我的Angular post请求中？(How to add headers to my Angular post request?)

对于学校项目，我需要使用Angular创建一个简单的登录页面。 单击登录按钮时，我需要在帖子中添加Authorization标头。 我创建了一个后端，当我将我的授权值与邮递员一起发布到后端时，它对后端没有任何影响。 当我尝试使用我的前端发布到同一个后端时，它不起作用。 什么是向你的文章添加标题的最佳方式？ 看来这些意见是分歧的。 这是我的代码：

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状态响应并且不添加标头。

For a school project I need to make a simple login page with Angular. When a login button is clicked I need to add an Authorization header with my post. I created a backend and when I post my Authorization value to that backend with postman it works so nothing wrong with the backend. When I try to post to the same backend with my frontend it doesn't work. What is the best way to add headers to your post? It seems that the opinions are divided. This is my code:

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); } ) } }

When I run that code I get a 400 status response and the headers are not added.

最满意答案

HttpClient.post期望第二个参数是POST请求的主体。 在你的例子中，你提供了Headers作为body，这不是你想要的。 您可以使用以下内容正确提供标题：

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函数需要使用并返回一个HttpHeaders因为这个类是不可变的，每次调用它时append返回一个新的对象。

您将需要从@angular/common/http导入HttpHeaders 。

The second argument passed in to HttpClient.post represents the body of the request, but you're providing Headers here. Use the following to provide the headers correctly:

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

I've shown null in the example for the body, but you probably want that to include the email and password properties in some form.

You're also mixing Http and HttpClient. If you're going to use HttpClient (which is now the recommended approach), drop RequestOptions and Headers in favour of HttpHeaders. This becomes:

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

The rest of the code stays the same. Your createAuthorizationHeader function needs to use and return an instance of HttpHeaders. This class is immutable, so append returns a new object each time it is called. Import HttpHeaders from @angular/common/http.

如何将标题添加到我的Angular post请求中？(How to add headers to my Angular post request?)

对于学校项目，我需要使用Angular创建一个简单的登录页面。 单击登录按钮时，我需要在帖子中添加Authorization标头。 我创建了一个后端，当我将我的授权值与邮递员一起发布到后端时，它对后端没有任何影响。 当我尝试使用我的前端发布到同一个后端时，它不起作用。 什么是向你的文章添加标题的最佳方式？ 看来这些意见是分歧的。 这是我的代码：

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状态响应并且不添加标头。

For a school project I need to make a simple login page with Angular. When a login button is clicked I need to add an Authorization header with my post. I created a backend and when I post my Authorization value to that backend with postman it works so nothing wrong with the backend. When I try to post to the same backend with my frontend it doesn't work. What is the best way to add headers to your post? It seems that the opinions are divided. This is my code:

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); } ) } }

When I run that code I get a 400 status response and the headers are not added.

最满意答案

HttpClient.post期望第二个参数是POST请求的主体。 在你的例子中，你提供了Headers作为body，这不是你想要的。 您可以使用以下内容正确提供标题：

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函数需要使用并返回一个HttpHeaders因为这个类是不可变的，每次调用它时append返回一个新的对象。

您将需要从@angular/common/http导入HttpHeaders 。

The second argument passed in to HttpClient.post represents the body of the request, but you're providing Headers here. Use the following to provide the headers correctly:

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

I've shown null in the example for the body, but you probably want that to include the email and password properties in some form.

You're also mixing Http and HttpClient. If you're going to use HttpClient (which is now the recommended approach), drop RequestOptions and Headers in favour of HttpHeaders. This becomes:

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

The rest of the code stays the same. Your createAuthorizationHeader function needs to use and return an instance of HttpHeaders. This class is immutable, so append returns a new object each time it is called. Import HttpHeaders from @angular/common/http.