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);
}
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")
Fiddlerをインストールします。カスタムルールを追加します。
static function OnBeforeResponse(oSession: Session)
{
oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
}
これにより、ローカルホストからクロスドメインリクエストを行うことができます。 APIがHTTPSの場合は、フィドラーで「HTTPSトラフィックの復号化」を有効にしてください。
--------------------更新
取得する応答はJSONです。 JSONPをデータ型として指定しても機能しません。 JSONPを指定する場合、戻り値はJSONオブジェクトではなく関数でなければなりません。