☰

ファイル:// URL から実行されているアプリケーションによるリクエストで「Access-Control-Allow-Origin では Origin null は許可されていません」というエラーが発生する 質問する

tag-icon • tag-icon javascript jquery xmlhttprequest cors jsonp
ファイル:// URL から実行されているアプリケーションによるリクエストで「Access-Control-Allow-Origin では Origin null は許可されていません」というエラーが発生する 質問する

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

Flickr 側は正常に動作していますが、Panoramio から実行しようとすると$.get(url, callback)、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. Origin null は Access-Control-Allow-Origin では許可されません。

ブラウザから直接その URL をクエリすると、正常に動作します。何が起こっているのでしょうか。また、これを回避できますか。クエリの作成方法が間違っているのでしょうか。それとも、これは Panoramio が私の実行を妨害するために行っていることなのでしょうか。

Googleでは、エラーメッセージ。

編集

問題を示すサンプルコードを次に示します。

$().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);
  });
});

あなたはできるオンラインで例を実行する。

編集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...
  });
});

ベストアンサー1

記録によると、私が知る限り、あなたには 2 つの問題がありました。

  1. に「jsonp」型指定子を渡していなかった$.getため、通常の XMLHttpRequest を使用していました。ただし、ブラウザは CORS (Cross-Origin Resource Sharing) をサポートしており、サーバーが承認した場合はクロスドメイン XMLHttpRequest を許可します。そこでヘッダーがAccess-Control-Allow-Origin登場しました。

  2. file:// URL から実行しているとおっしゃっていたと思います。CORS ヘッダーがクロスドメイン XHR が OK であることを通知する方法は 2 つあります。1 つは送信する方法Access-Control-Allow-Origin: *( 経由で Flickr にアクセスしていた場合は$.get、送信しているはずです)、もう 1 つはOriginヘッダーの内容をエコーバックする方法です。ただし、 URL はエコーバックで承認できないfile://null を生成します。Origin

最初の問題は、 Darin の を使用するという提案によって回りくどい方法で解決されました。これは、URL に$.getJSON部分文字列が見つかった場合に、リクエスト タイプをデフォルトの「json」から「jsonp」に変更するというちょっとした魔法をかけます。callback=?

これにより、URL から CORS リクエストを実行しなくなり、2 番目の問題が解決されましたfile://。

他の人のために明確にするために、簡単なトラブルシューティングの手順を以下に示します。

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

おすすめ記事