在訪問遠程服務中的數據時Angular JS中的訪問控制 - 允許 - 來源錯誤

Question

我有服務正在使用另一臺計算機的網址，我在使用IP地址訪問來自其他計算機的響應時出現此錯誤。 。

$http({method : 'post', 
     url : 'http://xxx.xxx.0.xxx:8080/hms/spring/user/users' 
     data : ''}).then(function(response) { 
        $scope.patient_data = response.data; 
       }); 

收到此錯誤：

XMLHttpRequest cannot load http://xxx.xxx.0.xxx:8080/hms/spring/user/users. 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:8080' is therefore not allowed access. 

Answer 1

訪問控制允許來源是CORS (Cross-Origin Resource Sharing) header。

當網站A試圖從網站B獲取內容時，網站B可以發送訪問控制允許原始響應標頭，告訴瀏覽器該網頁的內容可以被某些來源訪問。 （源是域，加上方案和端口號。）默認情況下，站點B的頁面不能被任何其他來源訪問;使用Access-Control-Allow-Origin標題爲特定請求源的跨源訪問打開了一扇門。

對於每個資源/頁站點B要做出一個網站訪問，站點B應該成爲其頁面與響應頭：

Access-Control-Allow-Origin: http://siteA.com 

現代瀏覽器不會徹底阻止跨域請求。如果站點A從站點B請求一個頁面，瀏覽器將實際獲取網絡級別上請求的頁面，並檢查響應標題是否將站點A列爲允許的請求者域。如果站點B未指示站點A被允許訪問此頁面，瀏覽器將觸發XMLHttpRequest的錯誤事件，並拒絕對發出請求的JavaScript代碼的響應數據。

非簡單的要求：

在網絡層面會發生什麼事能比上述解釋稍微複雜一些。如果請求是"non-simple" request，瀏覽器首先發送無數據「預檢」OPTIONS請求，以驗證服務器是否接受請求。當（或兩者之一）請求是非簡單的：

使用非GET或POST（例如PUT，DELETE）以外的使用非簡單請求頭的HTTP動詞;唯一簡單的請求標頭是：Accept Accept-Language Content-Language Content-Type（當它的值爲application/x-www-form-urlencoded，multipart/form-data或text/plain時，這只是簡單的）如果服務器使用與非簡單動詞和/或非簡單標題匹配的適當響應標題（用於非簡單標題的訪問控制 - 允許標題，用於非簡單動詞的訪問控制 - 允許 - 方法）響應OPTIONS預檢，那麼瀏覽器發送實際的請求。

假設站點A要發送的/ SomePage的PUT請求，與應用/ JSON的非簡單的內容類型值，瀏覽器將首先發送一個預檢要求：

OPTIONS /somePage HTTP/1.1 
Origin: http://siteA.com 
Access-Control-Request-Method: PUT 
Access-Control-Request-Headers: Content-Type 

注意瀏覽器自動添加Access-Control-Request-Method和Access-Control-Request-Headers;你不需要添加它們。這OPTIONS預檢得到成功響應頭

訪問控制允許來源：http://siteA.com 訪問控制允許的方法：GET，POST，PUT 訪問控制允許報頭：Content-Type的 發送當實際請求（預檢完成後），行爲與處理簡單請求的方式相同。換句話說，其預檢成功的非簡單請求被視爲與簡單請求相同（即，服務器仍必須爲實際響應再次發送Access-Control-Allow-Origin）。

的瀏覽器發送實際的請求：

PUT/SomePage的HTTP/1.1 產地：http://siteA.com 內容類型：應用/ JSON

{ 「myRequestContent」： 「JSON是如此之大」} 而服務器返回一個訪問控制允許來源，就像它爲一個簡單的要求：

訪問控制允許來源：http://siteA.com 多一點informati見Understanding XMLHttpRequest over CORS關於非簡單的請求。

我相信這會幫助您更好地理解CORS問題和解決方案。