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