添加額外的頭到一個HTTP請求

這是我在角4的應用程序添加頁眉到一個http請求的方式：添加額外的頭到一個HTTP請求

constructor(private http: Http) { } 

getUsers() { 
    const headers = new Headers(
     { 
      'Content-Type': 'application/json', 
      'Authorization': 'somekey ' + localStorage.getItem('token') 
     }); 
    return this.http.get(environment.apiUrl + 'users/all', {headers: headers}) 
}

我的API工作正常，當我通過郵差調用它。當我檢查結果

request.getHeader("Authorization")

它返回適當的值，這是我的令牌。

但是當我通過前端應用

request.getHeader("Authorization")

返回空調用API。還會創建一個名爲「access-control-request-headers」的標頭，其值爲：「authorization，content-type」。我設置的令牌在哪裏？爲什麼這個請求沒有被授權得到結果，就像我使用Postman調用API一樣？

來源

2017-07-21 Alireza

你用的console.log得到（localStorage.getItem（ '令牌'）） ;這樣對嗎？ – Vega

對不起，我剛剛看到你的評論。是的，我在localStorage中擁有正確的價值。我解決了這個問題。看看下面的答案。 – Alireza

沒問題，很高興你解決了它。 – Vega

它是由瀏覽器的機制造成了CORS（跨來源資源共享）的問題。我相信這不是前端框架的問題。

有兩種不同類型的請求：簡單請求和預檢請求。

當您向請求添加新標頭時，它不會再被視爲簡單的請求。與「簡單請求」不同，「preflighted」請求首先通過方法向另一個域上的資源發送HTTP請求，以確定實際請求是否安全發送。跨站點請求像這樣被預檢，因爲它們可能會影響用戶數據。

與簡單的請求一樣，瀏覽器將Origin頭添加到每個請求中，包括預檢。預檢請求作爲HTTP OPTIONS請求進行。它還包含一些額外的頭文件和「訪問控制請求頭文件」是這些附加頭文件之一，它是包含在請求中的非簡單頭文件的逗號分隔列表。在我的情況下，這個頭的值是：「授權，內容類型」。

因此，我檢查的請求是預發送的請求，而不是我發送給後端API的實際請求。

您可以用自己的方式處理此預發光請求。就像避免過濾和設置狀態時，200 HTTP方法是選項：

if("options".equalsIgnoreCase(request.getMethod())) { 
    response.setStatus(HttpServletResponse.SC_OK); 
} else { 
    chain.doFilter(req, res); 
}

這可能不是最好的解決辦法，但你不會得到「預檢響應具有無效的HTTP狀態碼401」。

請讓我知道什麼是對付這種預檢要求

這裏您首選的方式是我用來塑造這個答案的鏈接。他們可以幫助你進一步瞭解CORS：

https://www.html5rocks.com/en/tutorials/cors/

http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Response for preflight has invalid HTTP status code 401 - Spring

來源

2017-07-25 22:09:58 Alireza

試着做這個。

private headers: Headers; 

constructor(private http: Http) { 
    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('Authorization', 'somekey ' + localStorage.getItem('token')); 
} 

public getUsers() { 
    const options = new RequestOptions({ 
    headers: this.headers 
    }); 
    return this.http.get(environment.apiUrl + 'users/all', options) 
}

來源

2017-07-21 17:45:44 Rama

謝謝。試過了。仍然有同樣的問題。 – Alireza

這是我用於「標題」對象的「導入」嗎？從'@ angular/http'導入{Http，Headers，Response，RequestOptions} – Alireza

要排除服務器端可能存在的問題，可以嘗試使用Postman等休息客戶端進行GET調用嗎？ – Rama

添加額外的頭到一個HTTP請求

回答

相關問題