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

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

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

下面是她給My Code：

<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資料

使用$http.jsonp()函數來發送請求；
指定callback和回呼函數名，函數名為JSON_CALLBACK時，會回調success函數，JSON_CALLBACK必須全部大寫；
也可以指定其它回呼函數，但必須定義在window下的全域函數；
URL中必須添加callback;

瀏覽器是存在同源策略的，在全域層面禁止了頁面載入或執行與自身來源不同的域的任何指令碼；JSONP是一種可以繞過瀏覽器的安全限制，從不同的域請求資料的方法；

這個解釋足以理解跨域問題和為什麼需要使用JSONP？

以上就是本文的全部內容，希望對大家有所協助，同時也希望多多支援雲棲社區！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More