AJAX 経由で file:// URL から画像を取得すると、「Origin null は Access-Control-Allow-Origin によって許可されていません」というメッセージが表示されるのはなぜですか?

エラー: file:// URL

In からリクエストする場合、「Access-Control-Allow-Origin ではオリジン null は許可されていません」 AJAX 経由で Panoramio から画像を取得しようとすると、Chrome で「XMLHttpRequest を読み込めません [Panoramio]」というエラーが繰り返し発生します。 API URL]。Origin null は Access-Control-Allow-Origin では許可されません。」このエラーは、次の根本的な問題に起因します:

1. リクエスト タイプが正しく構成されていません:
   最初のコードでは、リクエスト タイプが JSONP として指定されていませんでした。その後、jQuery は XMLHttpRequest を採用しました。これは、クロスドメイン リクエストに対して Cross-Origin Resource Sharing (CORS) に依存します。ただし、ブラウザは、Access-Control-Allow-Origin ヘッダーを介したサーバー認証でのみ CORS をサポートします。
2. file:// URL からの Null Origin:
   コードが実行されたときfile:// URL の場合、null の Origin ヘッダーが生成されました。この null のオリジンはサーバーからエコー バックできず、認証エラーが発生します。

解決策:

これらの問題を解決するには、次の修正を加えます。

1. $.getJSON を使用しますcallback=?:
   $.get の代わりに $.getJSON を使用し、callback=? を追加します。リクエストURLに。これにより、jQuery に JSONP を使用するよう通知され、リクエスト タイプが自動的に「jsonp」に設定されます。
2. HTTP プロトコルの確認:
   コードが HTTP URL (http: //) file:// の代わりに。これにより、CORS が適切に機能するようになります。

改訂コード:

$.getJSON('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=?', function (data) {
  // Process data
});

トラブルシューティングのヒント:

• JSONP 構文を確認します (例: URL に$.get リクエストの callback=?)。
• クロスオリジン XMLHttpRequest リクエストには HTTP URL を使用します。
• ブラウザの CORS サポートを確認します（例: Opera と Internet Explorer は完全にはサポートしていない可能性があります） .

以上がAJAX 経由で file:// URL から画像を取得すると、「Origin null は Access-Control-Allow-Origin によって許可されていません」というメッセージが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。