無法在角度中正確設置某些HTTP標頭鍵值對

Question

我有一個問題，通過向http.post添加一些HTTP標頭鍵值。 它應該很簡單，但我沒有正確設置。 我們在服務器端使用spring-boot和客戶端角度框架。 我們的后端請求以下標頭值：

'Content-Type' = 'application/json' 
'X-Requested-With' = 'XMLHttpRequest' 
'Cache-Control' = 'no-cache'

在angular中，我創建了一個標題，這個標題我添加了一個RequestOptions並將此選項添加到post請求中。 見下面的代碼：

.....
    let myHead = new Headers();
    myHead.append('Content-Type', 'application/json');
    myHead.append('X-Requested-With', 'XMLHttpRequest');
    myHead.append('Cache-Control', 'no-cache');
    const options = new RequestOptions({ headers: myHead });

    return this.http.post(ServerUrl,data, options).map((response: Response) => {..//do Something...}

...

問題是，如果我正在檢查發布請求，我看到標題未正確設置。

如您所見，它未正確設置為我期待的鍵值！？

如果我使用工具（例如postman插件）執行此操作，您將看到它應該如何正確完成：

POST /ias-vwa/api/auth/login HTTP/1.1
Host: de00-fm26-l1:9090
Content-Type: application/x-www-form-urlencoded
X-Requested-With: XMLHttpRequest
Cache-Control: no-cache
Postman-Token: c9bc0404-bc1e-57eb-fca4-07bba9ee6d93

我嘗試了很多不同的選項來設置標題，但我總是最終會將它總是設置在一行中，如下所示：

訪問控制請求報頭：訪問控制允許來源，緩存控制，內容類型，X-要求，與

我在瀏覽器上遇到的錯誤：

XMLHttpRequest cannot load http://t00:9090/ias-vwa/api/auth/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401.

任何身體都可以給我一個暗示嗎？

Answer 1

您正嘗試從您的域（您的應用程序直播）發布到不同的域，並且您正在運行CORS問題。 您需要在響應中添加Access-Control-Allow-Origin作為標頭。

Access-Control-Allow-Origin: *

Answer 2

好的，我解決了這個問題。 正如本文和Yordan Nikolov所提到的，這是一個CORS問題

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

如果在某些情況下（如文章中所述），瀏覽器將發送預檢請求。 在此請求中，自定義值將僅在Access-Control-Request-Headers中命名。 該請求將是OPTIONS方法的HTTP請求。 在我們的例子中，spring-boot服務器需要實現一個過濾器來過濾這個請求並評估這個cutom標頭是否允許。 在使用HTTP 200響應預檢請求后，客戶端將發送包含自定義標頭的實際請求。 如果請求來自其他域，則此CORS問題很重要。

因此，將正確設置客戶端（angular2）的設置。

希望它可以幫助任何人