AngularJs解決跨域問(wèn)題案例詳解(簡(jiǎn)單方法)

更新時(shí)間：2016年05月19日 09:35:04 作者：白狼

本文通過(guò)一個(gè)案例給大家介紹angularJs解決跨域問(wèn)題，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

首先我們做點(diǎn)準(zhǔn)備說(shuō)明，不然你明白我說(shuō)的是啥意思別人不明白，就算別人明白了那總有人不明白，那你要說(shuō)了，我的意思是這個(gè)說(shuō)明必須要做了，答案是必須的，為了更好的方便大家理解嘛。

我們以?xún)蓚€(gè)主域名或者一個(gè)主域名+一個(gè)二級(jí)域名為例，均可演示跨域問(wèn)題。

客戶(hù)端 a.com

服務(wù)端 b.com或者s.a.com

angularJs版本 V1.2.25

準(zhǔn)備工作做得很充分嘛，就差把我們的編輯器是subline暴露出來(lái)了，這個(gè)一般人我是不告訴他滴。

有人嚷嚷了，這問(wèn)題老早就有了，你現(xiàn)在提出來(lái)有啥意義呢？難不成你還能把花忽悠開(kāi)了？嗯，我還真能把花寫(xiě)開(kāi)了?？磻虬?，我們本篇要上演的是完整版跨域?qū)嵗?/p>

接下來(lái)我們先看客戶(hù)端是如何請(qǐng)求數(shù)據(jù)的

注意哦，我們的代碼是寫(xiě)在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的形式進(jìn)行跨域請(qǐng)求的，其操作同jquery中對(duì)跨域的請(qǐng)求方式如出一轍。注意，我們的callback是固定的，即JSON_CALLBACK，盡量不要去做任何改動(dòng)

我們?cè)倏捶?wù)端b.com中的test.php對(duì)請(qǐng)求數(shù)據(jù)的處理方式，這里以原生php的方式做參考

$callBack = isset($_GET['callback']) ? $_GET['callback'] : DEFAULT_CALLBACK;
exit($callBack.'('.json_encode($data).')');

我們?cè)倩貋?lái)看看客戶(hù)端console.log記錄的結(jié)果

到此，也就是說(shuō)我們跨域請(qǐng)求是成功的！

最后我們做個(gè)小總結(jié)，注意下其中的重點(diǎn)：

1.客戶(hù)端跨域請(qǐng)求的url后追加的參數(shù)是?callback=JSON_CALLBACK，參數(shù)callback的值指定為JSON_CALLBACK，注意是大寫(xiě)，就是JSON_CALLBACK不要作任何改動(dòng)，感覺(jué)這里是個(gè)不小的坑，?callback的值稍作改動(dòng)，客戶(hù)端就需要全局定義callback函數(shù)，而且還特么怎么再傳給$scope處理？為了避免不必要的麻煩，這里建議就這么搞吧

2.再看服務(wù)端，服務(wù)端需要指定$callBack = $_GET['callback'];接收callback,而且你還會(huì)發(fā)現(xiàn)接收的callback不是我們客戶(hù)端寫(xiě)的?callback的值，客戶(hù)端指定JSON_CALLBACK應(yīng)該是為了觸發(fā)angularJs內(nèi)部的機(jī)制

您可能感興趣的文章: