如何向我的Angular帖子请求添加标题?
发布时间:2020-12-17 17:57:22 所属栏目:安全 来源:网络整理
导读:对于学校项目,我需要使用Angular创建一个简单的登录页面.单击登录按钮时,我需要在帖子中添加Authorization标头.我创建了一个后端,当我使用邮递员将我的授权值发布到该后端时,它的工作方式与后端没有任何问题.当我尝试使用我的前端发布到同一个后端时,它不起
对于学校项目,我需要使用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状态响应并且不添加标头. 解决方法HttpClient.post 期望第二个参数是POST请求的主体.在您的示例中,您提供Headers作为正文,这不是您的意图.您可以使用以下方法正确提供标头:
return this.http.post('http://localhost:8000/api/v1/authenticate',null,options); 我在身体的示例中显示为null,但您可能希望以某种形式包含电子邮件和密码属性. 编辑:你正在混合Http和HttpClient.如果您打算使用HttpClient(现在是推荐的方法),则需要删除RequestOptions和Headers以支持 let headers = new HttpHeaders({ 'Content-Type': 'application/json','Authorization': this.basic }); let options = { headers: headers }; 其余代码与我上面显示的相同.重要的是要注意你的createAuthorizationHeader函数需要使用并返回一个HttpHeaders,因为这个类是不可变的,并且append每次调用时都返回一个新对象. 您需要从@ angular / common / http导入HttpHeaders. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 在angularjs app中更改页面的位置哈希,无需重新加载页面
- 如何使用AngularJS,组件和ngResource在CRUD中实现C?
- bootstrap学习29---javascript插件之引用的注意事项
- vim 删除一整块,vim 删除一整行
- scala – SBT本机打包程序中的多个项目依赖项
- vim – 如何为CoffeeScript生成ctags?
- 何时在angular2中使用ngrx / effect
- shell – 在unix中的两个固定格式文件中查找字段值 – 不起
- BootStrap中的按钮使用
- AngularJS的Provider, Value, Constant, Service, Factory,