解析AngularJS中get請求URL出現的跨域問題

2019-11-19 18:44:29

字體：大中小

來源：轉載

供稿：網友

今天早上幫助同學看了一個AngularJS的問題，主要是請求中出現了跨域訪問，請求被阻止。

下面是她給我的代碼：

<html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"></script>--> <script src="angular.min.js"></script> <script>  angular.module("myApp",[]).controller("test",["$scope","$http",function($scope,$http){    $http.get("http://datainfo.duapp.com/shopdata/getGoods.php?classID=1")    .success(function(response){     $scope.myarr = response.sites;    })  }]) </script></head><body> <div ng-controller="test">  <ul>   <li ng-repeat="data in myarr">    <img src="{{data.goodsListImg}}"/>    <p>名稱：<span>{{data.goodsName}}</span></p>    <p>價格：<span>{{data.price|currency:"￥"}}</span></p>   </li>  </ul> </div></body></html>

出現的問題

我們可以看到他是通過$http的get方式訪問URL，一直訪問不了，我將具體的response打印到控制臺上面，也使出現了問題。

這個是瀏覽器的跨域造成的，之前的學習中我也不是很清楚這個，只是知道由于不是在同一個域名下面訪問的此域名下的資源就會造成跨域。其實之前看到這個是以為請求的格式有問題，返回的json數據到不了。

下面是json格式返回的數據。

按照她給我的URL，我發現在json數據前面有一個callback,這個是php中的回調函數，結果網上一搜發現get請求對于這種回調函數是沒有作用的。

解決辦法

必須使用下面的這種辦法來處理這種有callback的jsonp格式的數據。

<script> var myApp = angular.module("App", []); myApp.controller("test", function($scope, $http) {  // 回調函數用法  myUrl = "http://datainfo.duapp.com/shopdata/getGoods.php?callback=JSON_CALLBACK";  $http.jsonp(myUrl).success(function(response) {   console.log(response);  }); });</script>

注意兩點：

使用$http.jsonp()請求數據；(解決了跨域的問題)
在URL后面添加callback=JSON_CALLBACK字符；

這樣就可以正常的訪問數據。其實對于json個格式的數據我們要是想知道那里有錯誤，有一種辦法是將其打印到瀏覽器的控制臺中，這樣我們就可以看到具體的流程和結果。

完整代碼

<!DOCTYPE html><html ng-app="App"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> <script>  var myApp = angular.module("App", []);  myApp.controller("test", function($scope, $http) {   // 回調函數用法   myUrl = "http://datainfo.duapp.com/shopdata/getGoods.php?callback=JSON_CALLBACK";   $http.jsonp(myUrl).success(function(response) {    console.log(response);    $scope.myarr = response;   });  }); </script></head><body> <div ng-controller="test">  <ul>   <li ng-repeat="data in myarr">    <!--scr里面的angularJS不可以這樣寫-->    <img src="{{data.goodsListImg}}" />    <p>名稱：<span>{{data.goodsName}}</span></p>    <p>價格：<span>{{data.price|currency:"￥"}}</span></p>   </li>  </ul> </div></body>

自動將我們的JSON_CALLBACK替換成了下面的字符，這應該是AngularJS替換的。

引用

跨域是如何解決的：

通過json來傳遞數據，靠jsonp來跨域，json是一種數據交換格式，而jsonp是一種靠開發人員的聰明才智創造的一種非官方跨域數據交互協議；

JSONP是如何產生的：

一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準；
不過我們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；
于是可以判斷，當前階段如果想通過純web端（ActiveX控件、服務端代理、屬于未來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件里，供客戶端調用和進一步處理；
恰巧我們已經知道有一種叫做JSON的純字符數據格式可以簡潔的描述復雜數據，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數據；
這樣子解決方案就呼之欲出了，web客戶端通過與調用腳本一模一樣的方式，來調用跨域服務器上動態生成的js格式文件（一般以JSON為后綴），顯而易見，服務器之所以要動態生成JSON文件，目的就在于把客戶端需要的數據裝入進去。
客戶端在對JSON文件調用成功之后，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠程數據的方式看起來非常像AJAX，但其實并不一樣。
為了便于客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

AngularJS中處理jsonp數據