Angular 角度2未授权响应(401)
我正在编写一个需要用户身份验证才能访问某些功能的应用程序。当经过身份验证的用户登录时,服务器生成JSON Web令牌(JWT)。我将生成的令牌保存在localstorage中。若要发布、删除和更新数据库中的某些数据,标头中需要凭证。我使用AngularIO文档来设置请求头。然而,当我发出post请求时,我得到了未经授权的响应(401)。这是post请求和标题Angular 角度2未授权响应(401),angular,http,authentication,http-headers,Angular,Http,Authentication,Http Headers,我正在编写一个需要用户身份验证才能访问某些功能的应用程序。当经过身份验证的用户登录时,服务器生成JSON Web令牌(JWT)。我将生成的令牌保存在localstorage中。若要发布、删除和更新数据库中的某些数据,标头中需要凭证。我使用AngularIO文档来设置请求头。然而,当我发出post请求时,我得到了未经授权的响应(401)。这是post请求和标题 createItem(name: string, text: string) { const body = JSON.stringi
createItem(name: string, text: string) {
const body = JSON.stringify({noteData: {name: name, text: text}});
const headers = new Headers();
const token = localStorage.getItem('token');
headers.append('Content-Type', 'application/text' );
headers.append('Authorization', 'Bearer ' + token);
const options = new RequestOptions({ headers: headers });
return this._http.post(this.createNote, body, options)
.map(this.extractData);
}
//下面是请求头错误响应
Request URL:http://localhost:4500/api/notes
Request Method:POST
Status Code:401 Unauthorized
Remote Address:[::1]:4500
Referrer Policy:no-referrer-when-downgrade
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:0
Date:Wed, 26 Jul 2017 03:08:45 GMT
Vary:Origin
X-Powered-By:Express
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Authorization:Bearer "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjM3ZTY3MDQ3LTY0MjQtNDZkMi04NjI0LTdhZmVlYjMyZTdlZiJ9.NEKOQpQIsjYpUHKh061Jl_9-Zz_Ude5MkcsGrOLetKU"
Cache-Control:no-cache
Connection:keep-alive
Content-Length:43
Content-Type:application/text
Host:localhost:4500
Origin:http://localhost:4200
Pragma:no-cache
Referer:http://localhost:4200/note
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
//用于登录和设置本地存储的函数
login(username: string, password: string) {
const body = JSON.stringify({username: username, password: password});
const headers = new Headers();
headers.append( 'Content-Type', 'application/json' );
const options = new RequestOptions({ headers: headers });
return this._http.post(this.loginUser, body, options)
.map((res: Response) => {
const token = res.json() && res.json().token;
if (token) {
localStorage.setItem('token',JSON.stringify(res.json().token));
}
})
.catch((error: any) =>
Observable.throw(error.json().error || 'Server error'));
}
在承载后添加空格:
createItem(name: string, text: string) {
const body = JSON.stringify({noteData: {name: name, text: text}});
const headers = new Headers();
const token = localStorage.getItem('token');
headers.append('Content-Type', 'application/text' );
headers.append('Authorization', 'Bearer ' + token); //<-- added space after 'Bearer'
const options = new RequestOptions({ headers: headers });
return this._http.post(this.createNote, body, options)
.map(this.extractData);
}
createItem(名称:string,文本:string){
const body=JSON.stringify({noteData:{name:name,text:text}});
常量头=新头();
const token=localStorage.getItem('token');
headers.append('Content-Type','application/text');
headers.append('Authorization'、'Bearer'+token);//该token肯定有问题。能否验证您在请求头中发送的token是否有效(即,您从本地存储检索的令牌与您从令牌生成服务接收到的令牌相同?此外,api的内容类型是否正确?也许它应该是application/json,但在任何情况下都不会产生401错误。我将从令牌生成服务生成的内容保存在本地存储中我建议您可以检查发送的实际头,可能是在开发人员控制台中,以确保保存和检索的值与您预期的一样。结果是什么?headers.append('Authorization'、'Bear'+token)由后端所有者自定义。他/她像这样配置授权:headers.append('authentication-token',token)你能从邮递员那里打个电话试试吗,告诉我你的电话成功与否。正如你所说的,你试图在Bearerheaders.append('Authorization','Bearer'+token)上留出空间
能否再次更新该问题,以避免任何人误解您的问题。@k11k2在邮递员请求中未经授权的响应为well@mulugetZeleke然后是关于您的令牌,您的令牌无效。现在不是关于您的头。请使用有效令牌验证,直到邮递员响应为202。并使用有效令牌检查您的代码。
createItem(name: string, text: string) {
const body = JSON.stringify({noteData: {name: name, text: text}});
const headers = new Headers();
const token = localStorage.getItem('token');
headers.append('Content-Type', 'application/text' );
headers.append('Authorization', 'Bearer ' + token); //<-- added space after 'Bearer'
const options = new RequestOptions({ headers: headers });
return this._http.post(this.createNote, body, options)
.map(this.extractData);
}