了解了angularjs的$http方法的本質跟jquery ajax方法是一樣的,就開始擔心跨域的問題,以前開發工作緊張,遇到了也把跨域問題放下,畢竟做的傳統web開發,后端提供的接口和前端都會發布在一個服務器上,現在做的項目大了,自然遇到一些團隊只負責發布API,而我們團隊只能去調用,跨域肯定是不可跳過的步驟啦。
沒想到這么一了解居然有這么多跨域的方法,也不知道可行不可行!先當時mark了吧
一、$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){ ... }
二、$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;
});
三、$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;
});
