AngularJS的$http的跨域問題


了解了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;
});
 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM