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

時間 2019-11-08

標籤 angularjs 請求 url 出現問題欄目 AngularJS 简体版

原文原文鏈接

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

下面是她給個人代碼：html

<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打印到控制檯上面，也使出現了問題。jquery

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

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

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

解決辦法

必須使用下面的這種辦法來處理這種有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數據