AngularJs最簡單解決跨域問題案例


作者:白狼 出處:http://www.manks.top/angularjs_ajax_jsonp.html 本文版權歸作者,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

首先我們做點准備說明,不然你明白我說的是啥意思別人不明白,就算別人明白了那總有人不明白,那你要說了,我的意思是這個說明必須要做了,答案是必須的,為了更好的方便大家理解嘛。

我們以兩個主域名或者一個主域名+一個二級域名為例,均可演示跨域問題。

  • 客戶端 a.com
  • 服務端 b.com或者s.a.com
  • angularJs版本 V1.2.25

准備工作做得很充分嘛,就差把我們的編輯器是subline暴露出來了,這個一般人我是不告訴他滴。

有人嚷嚷了,這問題老早就有了,你現在提出來有啥意義呢?難不成你還能把花忽悠開了?嗯,我還真能把花寫開了。看戲吧,我們本篇要上演的是完整版跨域實例。

接下來我們先看客戶端是如何請求數據的

注意哦,我們的代碼是寫在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對請求數據的處理方式,這里以原生php的方式做參考

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

 

我們再回來看看客戶端console.log記錄的結果

​[考慮目前國內網站大部分采集文章十分頻繁,更有甚者不注明原文出處,原作者更希望看客們查看原文,以防有任何問題不能更新所有文章,避免誤導!]

繼續閱讀


免責聲明!

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



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