Angular 2未经授权的响应（401）

Question

我正在编写一个需要用户身份验证才能访问某些功能的应用程序。当经过身份验证的用户登录时，服务器会生成JSON Web令牌（JWT）。我将生成的令牌保存在localstorage中。为了发布，删除和更新数据库中的某些数据，标题中需要凭证。我使用角度io文档来设置请求标题。但是，当我提出要求时，我收到了未经授权的回复（401）。这里是发布请求和首标

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

}

 private extractData(res: Response) { 
     return res.text() ? res.json() : {}; 
    } 

//这里是请求报头错误响应

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 

//功能登录并localStorage的设置

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

Answer 1

在B之后增加一个空格收信人：

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