[解決済み] file:// URLから実行されるアプリケーションのリクエストで、"Origin null is not allowed by Access-Control-Allow-Origin" エラーが発生する。

質問

jQueryのAJAXサポートを通じて、FlickrとPanoramioから画像を取得するページを開発しています。

Flickr側は問題なく動作しているのですが、Flickr側で $.get(url, callback) Panoramio からは、Chrome のコンソールにエラーが表示されます。

XMLHttpRequestを読み込むことができません http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150 . Access-Control-Allow-Originでは、OriginのNULLは許可されていません。

ブラウザから直接そのURLを問い合わせると、正常に動作します。 どうなっているのでしょうか。また、これを回避することはできるのでしょうか。 私がクエリの構成を間違えているのか、それともPanoramioが私がやろうとしていることを邪魔しているのでしょうか？

での検索では、有用なマッチは見つかりませんでした。 エラーメッセージ .

EDIT

以下は、この問題を示すサンプルコードです。

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';

  $.get(url, function (jsonp) {
    var processImages = function (data) {
      alert('ok');
    };

    eval(jsonp);
  });
});

あなたは オンラインでサンプルを実行する .

EDIT 2

Darinさんにお世話になりました。 上記のコードは間違っています。 代わりにこれを使用してください。

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';

  $.get(url, function (data) {
    // can use 'data' in here...
  });
});

解決方法は？

ちなみに、私が知る限りでは、2つの問題があったようですね。

1. に型指定子 "jsonp" を渡していませんでしたか？ $.get そのため、通常の XMLHttpRequest を使用しています。しかし、ブラウザはCORS（Cross-Origin Resource Sharing）をサポートしており、サーバーがOKすればクロスドメインのXMLHttpRequestを許可することができます。そこで Access-Control-Allow-Origin ヘッダーの登場です。

2. file://のURLから実行しているとのことでしたね。CORSヘッダがクロスドメインのXHRがOKであることを知らせるには、2つの方法があります。ひとつは Access-Control-Allow-Origin: * (を使用してFlickrに到達していた場合、それは $.get の内容をエコーバックするものです。 Origin ヘッダを作成します。しかし file:// のURLは、NULLの Origin これは、echo-backで認証することができません。

1つ目はDarinの提案で遠回しに解決しました。 $.getJSON . これは、リクエストタイプをデフォルトの "json" から "jsonp" に変更するためのちょっとしたマジックを行います。 callback=? をURLで指定します。

からのCORSリクエストを実行しようとしなくなったことで、2つ目は解決しました。 file:// のURLになります。

他の方にもわかりやすいように、簡単なトラブルシューティングの手順をご紹介します。

1. JSONPを使おうとしている場合は、以下のいずれかになっていることを確認してください。
   • を使用しています。 $.get を設定し dataType から jsonp .
   • あなたが使っているのは $.getJSON を含んでおり callback=? を URL に追加しました。
2. CORS経由でクロスドメインのXMLHttpRequestを行おうとしている場合...
   1. を介してテストしていることを確認してください。 http:// . を介して実行されるスクリプトは file:// は、CORS のサポートが制限されています。
   2. ブラウザで確認する は実際にCORSをサポートしています。 . (Opera と Internet Explorer は遅れています)