前言

開始本文之前，大家應該首先了解，協(xié)議、主機名和端口號相同叫同源。同源策略允許頁面從同一個站點加載和執(zhí)行特定的腳本。站外其他來源的腳本同頁面的交互則被嚴格限制。

要解決這個問題就需要跨域，本文介紹解決angular中的跨域的三種方式：

一、JSONP

JSONP的原理是通過 <script> 標簽發(fā)起一個GET請求來取代XHR請求。JSONP生成一個<script> 標簽并插到DOM中，然后瀏覽器會接管并向 src 屬性所指向的地址發(fā)送請求。當服務器返回請求時， 響應結果會被包裝成一個JavaScript函數(shù)， 并由該請求所對應的回調(diào)函數(shù)調(diào)用。

AngularJS在 $http 服務中提供了一個JSONP輔助函數(shù)。 通過 $http 服務的 jsonp 方法可以發(fā)送請求，如下所示：

  $http
  .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
  // 數(shù)據(jù)
  });

因為請求是由 <script> 標簽發(fā)送的，所以這個方法只能發(fā)送GET請求。

二、使用 CORS
CORS規(guī)范簡單地擴展了標準的XHR對象，以允許JavaScript發(fā)送跨域的XHR請求。它會通過預檢查（preflight）來確認是否有權限向目標服務器發(fā)送請求。預檢查可以讓服務器接受或拒絕來自全部服務器、特定服務器或一組服務器的請求。這意味著客戶端和服務端應用需要協(xié)同工作，才能向客戶端或服務器發(fā)送數(shù)據(jù)。

首先需要告訴AngularJS我們正在使用CORS。使用 config()方法在應用模塊上設置兩個參數(shù)以達到此目的。

angular.module('myApp', [])
.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers
.common['X-Requested-With'];
});

接下來，需要服務端設置響應頭，這個需要和后端人員鏡像
Access-Control-Allow-Origin 這個頭的值可以是與請求頭的值相呼應的值，為*表示允許接收從任何來源發(fā)來的請求。
Access-Control-Allow-Credentials 默認情況下，CORS請求不會發(fā)送cookie。如果服務器返回了這個頭，那么就可以通過將withCredentials 設置為 true 來將cookie同請求一同發(fā)送出去。

接下來就可以使用下面的請求進行跨域請求了

$http
.get("https://api.github.com")
.success(function(data) {
// 數(shù)據(jù)
});

三、服務器端代理這種方式更多的應該是后端來做的實現(xiàn)向所有服務器發(fā)送請求的最簡單方式是使用服務器端代理。

這個服務器和頁面處在同一個域中（或者不在同一個域中但支持CORS） ，做為所有遠程資源的代理?？梢院唵蔚赝ㄟ^使用本地服務器來代替客戶端向外部資源發(fā)送請求， 并將響應結果返回給客戶端。通過這種方式，老式瀏覽器不必使用需要發(fā)送額外請求的CORS（只有現(xiàn)代瀏覽器支持CORS）也能發(fā)送跨域請求，并且可以在瀏覽器中采用標準的安全策略。

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論