AngularJS的$http的跨域問題

瞭解了angularjs的$http方法的本質跟jquery ajax方法是同樣的，就開始擔憂跨域的問題，之前開發工做緊張，遇到了也把跨域問題放下，畢竟作的傳統web開發，後端提供的接口和前端都會發布在一個服務器上，如今作的項目大了，天然遇到一些團隊只負責發佈API，而咱們團隊只能去調用，跨域確定是不可跳過的步驟啦。

沒想到這麼一瞭解竟然有這麼多跨域的方法，也不知道可行不可行！先當時mark了吧

 

1、$http.jsonp【實現跨域】

1. 指定callback和回調函數名，函數名爲JSON_CALLBACK時，會調用success回調函數，JSON_CALLBACK必須全爲大寫。
2. 指定其它回調函數，但必須是定義在window下的全局函數。url中必須加上callback。

實現：

方法一：

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });
//  The name of the callback should be the string JSON_CALLBACK.

方法二【返回值，須要使用對應callback方法接收，但如何置於$scope???】：

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=badgeabc&siteid=137bd406");
function badgeabc(data){ ... }

2、$http.get【實現跨域】

1. 在服務器端設置容許在其餘域名下訪問

response.setHeader("Access-Control-Allow-Origin", "*"); //容許全部域名訪問
response.setHeader("Access-Control-Allow-Origin", "http://www.123.com"); //容許www.123.com訪問

2. AngularJS端使用$http.get()

實現：

$http.get('http://localhost/ajax/getAllIndustryCategoty.pt?languageColumn=name_eu').success(function(data){
	$scope.industries = data;
});

3、$http.post【實現跨域】

1. 在服務器端設置容許在其餘域名下訪問，及響應類型、響應頭設置

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods","POST");
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");

2. AngularJS端使用$http.post()，同時設置請求頭信息

實現：

$http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
	$scope.industries = data;
});本文轉載自：灰灰不會飛的博客http://www.cnblogs.com/flyGrey/p/6294091.html博主只是爲了便於學習複習轉載原做者的博客便於查找本身解決問題，若有侵權，能夠聯繫博主刪除，若是有查到博主轉載的文章的同仁能夠經過轉載連接去原做者空間查看，謝謝！