AngularJSでリクエストURLを取得してクロスドメインの問題を解析する

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

今朝、私はクラスメートが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にアクセスしていますが、いつもアクセスすることはできません。特定のレスポンスをコンソールに出力します。これも問題を引き起こします。

これはブラウザのクロスドメインによって引き起こされたものですが、私はこれまでの研究でこれをよく知らなかったので、同じドメイン名でアクセスされていないこのドメイン名のリソースがクロスドメインを引き起こすことを知りました。 実際、これを見る前に、要求のフォーマットに問題があり、返されたjsonデータに到達できませんでした。

以下はjson形式で返されるデータです。

彼女が私に渡したURLによると、jsonデータの前にコールバックがあることがわかりました。これはPHPのコールバック関数です。結果として、get要求がこのコールバック関数に影響しないことがインターネット上で検索されます。

ソリューション

この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>

2つの点に注意してください。

$ http.jsonp();を使用してデータを要求する(クロスドメインの問題を解決しました)
URLの後にコールバック= 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ページ、Webサービス、WCFですが、クロスドメイン要求であれば許可されません。
しかし、Webページ上でjsファイルを呼び出すと、クロスドメインの影響を受けないことがわかりました(それだけでなく、属性が "src"のすべてのタグに<script>、<img >、<iframe>);
したがって、純粋なWeb端末(ActiveXコントロール、サーバープロキシ、将来のHTML5に属するWebbookなど)を介してドメイン全体のデータにアクセスする場合、リモートサーバー上でデータを管理する可能性は1つしかないと判断できます。クライアントが呼び出して処理するためのjs形式のファイルにロードされます。
JSONは、簡単な方法で複雑なデータを記述することができるJSONという純粋な文字データフォーマットが存在することを既に知っているようですが、JSONもネイティブにjsによってサポートされています。
Webクライアントは、スクリプトが呼び出されるのと同じ方法で、クロスドメインサーバー上の動的に生成されたjs形式ファイル(通常JSON接尾辞)を呼び出します。サーバーが動的にJSONファイルを生成する理由は明らかです。目標は、クライアントが必要とするデータをロードすることです。
クライアントがJSONファイルを正常に呼び出すと、必要なデータが取得され、残りは必要に応じて処理されて表示されます。リモートデータを取得するこの方法は、AJAXに非常によく似ていますが、そうではありません。同じ。
クライアントからのデータの使用を容易にするために、非公式のトランスポートプロトコルが徐々に作成されていますが、JSONPと呼ばれていますが、このプロトコルの主なポイントの1つはコールバックパラメータをサーバーに渡すことです。このパラメータはJSONデータを関数名としてラップするので、クライアントは返されたデータを自動的に処理する独自の関数をカスタマイズできます。

AngularJSでjsonpデータを処理する

$ http.jsonp()関数を使用して要求を送信します。
コールバック関数とコールバック関数の名前を指定します。関数名がJSON_CALLBACKの場合、成功関数がコールバックされます.JSON_CALLBACKはすべて大文字でなければなりません。
他のコールバック関数を指定することもできますが、ウィンドウの下にグローバル関数を定義する必要があります。
URLにコールバックを追加する必要があります。

JSONPは、ブラウザのセキュリティ制限を回避し、異なるドメインからデータを要求する方法です。グローバルなレベルでは、ページのロードを禁止するスクリプトや、独自のソースとは異なるドメインを実行するスクリプトは禁止されています。

この説明はドメイン間の問題を理解するのに十分であり、なぜJSONPを使用する必要がありますか?


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ