2016-11-23 10 views
1

環境 - 使用CLI +引導Strap4的前端(localhost:4200) Spring boot + Security + JWT + REST用於後端的虛擬控制器(localhost:8080)Angular2 with CLI + Boot Strap4無法在'XMLHttpRequest'上執行'setRequestHeader':'授權:承載'

Chrome在'XMLHttpRequest'上執行'setRequestHeader'失敗:'Authorization:Bearer'不是有效的HTTP頭域名稱同一段代碼工作正常與IE。

我從最近兩週就一直在打我的頭,並且做了大量的谷歌搜索,無法解決問題。因爲我沒有時間,所以我在這裏發佈這個問題,希望一些Angular2神會提供解決此問題的建議。

環境 - Angular2與CLI +引導Strap4是前端(本地主機:4200)的後端(本地主機:8080) 春天開機+安全+智威湯遜+ REST FUL控制器

下面是這種情況:

登錄屏幕

Onsubmit - 將證書傳遞給Spring Boot安全性進行身份驗證。

的onsubmit(){

this.loginService.authenticateUser(this.loginUserDtls) 
.subscribe( 
    data => { 
    let token= JSON.parse(JSON.stringify(data))._body; 
    console.log("TOKEN VALUE "+token) ; 
    this.loginService.sendToken(token).subscribe( 
    data => { 
     let dataRet= JSON.parse(JSON.stringify(data))._body; 
     console.log("data received "+dataRet); 
    } 
    ) 

}); 

身份驗證成功的Spring Security產生JWT令牌和標記發送回堡壘最終保持它在響應頭如下

response.addHeader(「授權「,」持票人「+智威湯遜);

問題1- 一些原因角2(本地主機:4200)響應頭缺少這是擺在春季啓動安全服務認證頭信息(本地主機:8080)

對於問題1我有一個通過在響應主體中發送JWT令牌來解決這個問題。

提取令牌後,從反應體,我通過傳遞令牌中,如下所示角2請求頭調用一個不同的RESTful服務:

sendToken(令牌){

var headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
headers.append('Authorization', 'Bearer '+ token); 
headers.append('Accept', 'application/json'); 

return this.http.get('http://localhost:8082/users', {headers:headers}); 

}

上述工作在IE中工作正常,但在Chrome中測試相同的東西時得到 未能在'XMLHttpRequest'上執行'setRequestHeader':'Authorization:Bearer'不是有效的HTTP標頭字段n AME。另請確認截圖以獲取更詳細的控制檯日誌。

我已經嘗試了上面的代碼與RequestOptions withCredentials = true也沒有運氣與Chrome。

請寄出您的建議以解決問題。 enter image description here

回答

0

我能夠解決此問題。這個問題是由於CORS。由於Chrome在實際調用期間Chrome無法識別授權標頭,因此Chrome正在進行預檢,並且服務器未設置標頭。