AngularJs解決跨域問題案例詳解(簡單方法)
首先我們做點準備說明,不然你明白我說的是啥意思別人不明白,就算別人明白了那總有人不明白,那你要說了,我的意思是這個說明必須要做了,答案是必須的,為了更好的方便大家理解嘛。
我們以兩個主域名或者一個主域名+一個二級域名為例,均可演示跨域問題。
客戶端 a.com
服務端 b.com或者s.a.com
angularJs版本 V1.2.25
準備工作做得很充分嘛,就差把我們的編輯器是subline暴露出來了,這個一般人我是不告訴他滴。
有人嚷嚷了,這問題老早就有了,你現(xiàn)在提出來有啥意義呢?難不成你還能把花忽悠開了?嗯,我還真能把花寫開了??磻虬桑覀儽酒涎莸氖峭暾婵缬?qū)嵗?/p>
接下來我們先看客戶端是如何請求數(shù)據(jù)的
注意哦,我們的代碼是寫在a.com域名下面的
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <script src="./angular.min.js"></script> <script type="text/javascript"> var app = angular.module('app', []); app.controller('appCtrl', ['$scope', function ($scope) { $http({ method: 'JSONP', url: 'http://www.b.com/test.php?callback=JSON_CALLBACK', }).success(function (msg) { console.log(data); }); //或者 $http .jsonp('http://www.b.com/test.php?callback=JSON_CALLBACK') .success(function (msg){ console.log(msg); }); }]); </script> </head> <body> </body> </html>
我們看到,這里是直接以jsonp的形式進行跨域請求的,其操作同jquery中對跨域的請求方式如出一轍。注意,我們的callback是固定的,即JSON_CALLBACK,盡量不要去做任何改動
我們再看服務端b.com中的test.php對請求數(shù)據(jù)的處理方式,這里以原生php的方式做參考
$callBack = isset($_GET['callback']) ? $_GET['callback'] : DEFAULT_CALLBACK; exit($callBack.'('.json_encode($data).')');
我們再回來看看客戶端console.log記錄的結(jié)果
到此,也就是說我們跨域請求是成功的!
最后我們做個小總結(jié),注意下其中的重點:
1.客戶端跨域請求的url后追加的參數(shù)是?callback=JSON_CALLBACK,參數(shù)callback的值指定為JSON_CALLBACK,注意是大寫,就是JSON_CALLBACK不要作任何改動,感覺這里是個不小的坑,?callback的值稍作改動,客戶端就需要全局定義callback函數(shù),而且還特么怎么再傳給$scope處理?為了避免不必要的麻煩,這里建議就這么搞吧
2.再看服務端,服務端需要指定$callBack = $_GET['callback'];接收callback,而且你還會發(fā)現(xiàn)接收的callback不是我們客戶端寫的?callback的值,客戶端指定JSON_CALLBACK應該是為了觸發(fā)angularJs內(nèi)部的機制
相關(guān)文章
Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
基于流的前端自動化構(gòu)建工具,利用gulp可以提高前端開發(fā)效率,特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關(guān)資料,需要的朋友可以參考下。2017-07-07AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例
這篇文章主要介紹了AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03Angular.js ng-file-upload結(jié)合springMVC的使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-07-07angularjs+bootstrap實現(xiàn)自定義分頁的實例代碼
本篇文章主要介紹了angularjs+bootstrap實現(xiàn)自定義分頁的實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
這篇文章主要介紹了AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法,涉及AngularJS控制器controller簡單賦值操作實現(xiàn)技巧,需要的朋友可以參考下2017-01-01