前言

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

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

一、JSONP

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

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

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

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

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

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

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

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

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

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

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

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

總結

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