首先,協議、主機名和端口號相同叫同源。同源策略容許頁面從同一個站點加載和執行特定的腳本。站外其餘來源的腳本同頁面的交互則被嚴格限制。要解決這個問題就須要跨域,本文介紹解決angular中的跨域的三種方式:git
JSONPgithub
JSONP的原理是經過 <script> 標籤發起一個GET請求來取代XHR請求。JSONP生成一個<script> 標籤並插到DOM中,而後瀏覽器會接管並向 src 屬性所指向的地址發送請求。當服務器返回請求時, 響應結果會被包裝成一個JavaScript函數, 並由該請求所對應的回調函數調用。
AngularJS在 $http 服務中提供了一個JSONP輔助函數。 經過 $http 服務的 jsonp 方法能夠發送
請求,以下所示:json
$http .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) { // 數據 });
由於請求是由 <script> 標籤發送的,因此這個方法只能發送GET請求。後端
.使用 CORS
CORS規範簡單地擴展了標準的XHR對象,以容許JavaScript發送跨域的XHR請求。它會經過預檢查(preflight)來確認是否有權限向目標服務器發送請求。預檢查可讓服務器接受或拒絕來自所有服務器、特定服務器或一組服務器的請求。這意味着客戶端和服務端應用須要協同工做,才能向客戶端或服務器發送數據。
首先須要告訴AngularJS咱們正在使用CORS。使用 config()方法在應用模塊上設置兩個參數以達到此目的。api
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)也能發送跨域請求,而且能夠在瀏覽器中採用標準的安全策略。瀏覽器