web-dev-qa-db-ja.com

クロスドメイン$ httpリクエストAngularJS

JSONデータ用のAPIを呼び出すAngularJSで構築しているシンプルなWebサイトがあります。

しかし、クロスドメインオリジンの問題が発生しています

エラー：

XMLHttpRequestをロードできません http://api.nestoria.co.uk/api?country=uk&pretty=1&action=search_listings&place_name=soho&encoding=json&listing_type=rent 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin 'http：// localhost'はアクセスを許可されていません。

  searchByPlaceName: function() { 
        var url = baseurl+'country=uk&pretty=1&action=search_listings&place_name=london'+encoding+type;
         return $http.get(url);
    }
jsonangularjshttpcross-domain
12
Tom

api.nestoria.co.ukはCORSを許可しないようです。 Access-Control-Allow-Originヘッダー自体を設定する必要があります。直接制御することはできません。

ただし、JSONPを使用できます。そのサイトでは、callbackクエリパラメータを介して許可されています。

$http.jsonp(baseurl+'country=uk&pretty=1&action=search_listings&place_name=london'
    +encoding+type + "&callback=JSON_CALLBACK")
14
Explosion Pills

Fiddlerをインストールします。カスタムルールを追加します。

static function OnBeforeResponse(oSession: Session)
{
    oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
}

これにより、ローカルホストからクロスドメインリクエストを行うことができます。 APIがHTTPSの場合は、フィドラーで「HTTPSトラフィックの復号化」を有効にしてください。

参照

--------------------更新

取得する応答はJSONです。 JSONPをデータ型として指定しても機能しません。 JSONPを指定する場合、戻り値はJSONオブジェクトではなく関数でなければなりません。

[〜＃〜] jsonp [〜＃〜]

2
uiwarrior