对于学校项目,我需要使用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); } ) } }
解决方法
HttpClient.post
期望第二个参数是POST请求的主体.在您的示例中,您提供Headers作为正文,这不是您的意图.您可以使用以下方法正确提供标头:
return this.http.post('http://localhost:8000/api/v1/authenticate',null,options);
我在身体的示例中显示为null,但您可能希望以某种形式包含电子邮件和密码属性.
编辑:你正在混合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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。