前言

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

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

一、JSONP

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

最新評論