web-dev-qa-db-ja.com

Angularjsの問題$ http.getが機能しない

私はAngularjsの初心者であり、angularjs Webサイトのドキュメントで$ http.getに指定された例をフォローしようとしました。

REST=サービスがあり、呼び出されると次のようにデータが返されます。

http://abc.com:8080/Files/REST/v1/list?&filter=FILE


 {
  "files": [
    {
      "filename": "a.json",
      "type": "json",
      "uploaded_ts": "20130321"
    },
    {
      "filename": "b.xml",
      "type": "xml",
      "uploaded_ts": "20130321"
    }       
  ],  
 "num_files": 2}

Index.htmlファイルの内容の一部は次のようになります。

<div class="span6" ng-controller="FetchCtrl">
    <form class="form-horizontal">
        <button class="btn btn-success btn-large" ng-click="fetch()">Search</button>
    </form>
      <h2>File Names</h2>
      <pre>http status code: {{status}}</pre>
     <div ng-repeat="file in data.files">
      <pre>Filename: {{file.filename}}</pre>
    </div>

そして、私のjsファイルは次のようになります：

function FetchCtrl($scope, $http, $templateCache) {
  $scope.method = 'GET'; $scope.url = 'http://abc.com:8080/Files/REST/v1/list?&filter=FILE'; 
  $scope.fetch = function() {
    $scope.code = null;
    $scope.response = null;

    $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
      success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
      }).
      error(function(data, status) {
        $scope.data = data || "Request failed";
        $scope.status = status;
    });
  };      
}

しかし、これを実行すると、ファイル名の結果が表示されず、httpステータスコード= 0が表示されます

実行すると、

http://abc.com:8080/Files/REST/v1/list?&filter=FILE

私は、FirefoxでFirebugを使用してデバッグしようとしました。「検索」ボタンを押すと、上記のURLが呼び出されますが、応答は空に見えます。そして興味深いことに、FirebugではURLの下に、

オプション「URLを超える」

の代わりに

「Above URL」を取得します

私が間違っていることと、JSONデータにアクセスできない理由を教えてください。

ありがとう、

jsonhttprestgetangularjs
20
SL101

これは、angularがCORS要求（クロスサイトHTTP要求）を処理する方法が原因です。 Angularはデフォルトで追加のHTTPヘッダーを追加するため、OPTIONSではなくGETリクエストが表示されます。次のコード行を追加して、X-Requested-With HTTPヘッダーを削除してください。

delete $http.defaults.headers.common['X-Requested-With'];

CORSについては、 Mozilla Developer Network で以下が言及されています。

Cross-Origin Resource Sharing標準は、サーバーがWebブラウザーを使用してその情報を読み取ることを許可されているオリジンのセットを記述できるようにする新しいHTTPヘッダーを追加することにより機能します。

19
Aziz Shaikh

$ httpも使用する$ resourceを使用すると問題が発生します。

AngularJS 1.0.6を使用すると、リクエストはFirebugにも表示されませんが、AngularJS 1.1.4を使用すると、FirebugはGETリクエストと200 OKレスポンス、正しいヘッダー、空のレスポンスを表示します。実際、ヘッダーは、正しいコンテンツ長を持つ「Content-Length」ヘッダーで示されるようにデータが戻ってくることも示し、これをRESTクライアントプラグインと比較しましたデータを正常に取得していました。

さらに不審になった後、別のブラウザを試すことにしました。私はもともとFirefox 16.0.1を使用していました（そして20.0.1も試しました）が、IE 9（およびAngularJS 1.1.4）を試したところ、コードは問題なく正常に機能しました。

これが回避策を見つけるのに役立つことを願っています。私の場合、相対URLでこの問題が発生しなかったことに気づいたので、アプリとAPIの両方が同じポートで提供されるようにアプリを変更しています。これは、AngularJSのバグである可能性があります。

3
reedog117

今日、Firefoxでも同じ問題が発生しました。 IE正常に動作しました。あなたのようにコンソールでエラーが発生せず、角度のエラーメソッドでステータスが0に戻ったため、最初はcorsだとは思いませんでした。コンソールヘッダーに200の応答が返され、コンテンツの長さは返されましたが、実際の応答メッセージはありませんでしたFirefoxは、正しい方向を示すクロスサイトスクリプティングに関する警告を表示していました。 apiでこれが本当に最善の方法です。APIでGETのみを使用している場合は、jsonpを使用することもできます。これはangularに組み込まれており、あなたが消費しているAPIを制御しない場合のCORS。

$http.jsonp('http://yourapi.com/someurl')
    .success(function (data, status, headers, config) {
        alert("Hooray!");
    })
    .error(function (data, status, headers, config) {
        alert("Dang It!");
    });
2
Scott

クロスサイトスクリプティング保護です。 google chrome --disbable-web-security（コマンドライン経由）を起動してみてください。それが機能しない場合は、angularファイルプロトコルを使用する代わりにhttpサーバー（ヒント：use chrome --disable-web-security専用のブラウザーを使用する場合は、カナリア-もちろん設定する必要がありますコマンドライン引数もありますが、両方のchromeバージョンが同時に実行されます。）リリースの場合、AngularJSスタッフを提供するサーバーにいくつかのhttpヘッダーを設定して、Twitter APIまたはあなたが電話したいものは何でも。

0
Dodekeract