Ajax、サブドメイン、200 レスポンス、画像 — わかりましたか?

Question

これは非常によく似た質問です AJAX、サブドメイン、および 200 OK レスポンス （そして JavaScript 同一生成元ポリシー - 異なるサブドメインにどのように適用されますか?）、しかしひねりが加えられています。次のような状況があります。

• ドメイン (www.example.com)
• ページはサブドメイン (sd.example.com/cat/id) にあります。
• 別のサブドメイン (cdn.example.com) に対して ajax スタイルのリクエストを行う必要があります

前述の質問とは対照的に、私が要求しているのは画像です。

• 画像の GET リクエスト (jQuery $.load() を使用)

これはうまく機能しているようです. 。それは問題なく動作していたので、誰かが Firebug でエラーを生成していると指摘したとき、同一生成元ポリシーがすぐに思い浮かびませんでした。

• 画像 は ローカルホストでの読み込み (test.sd.example.com/cat/id の Apache VirtualHost URL)

しかし、私がリンクした質問のおかげでそのことが頭に浮かんだので、これが本番環境で確実に機能しないのではないかと心配しています。

• これでしょうか 続く 実稼働環境で動作すること -- そしてそれはクロスブラウザでも確実に動作するでしょうか?

答え：いいえ、それだけです 見た まるで機能しているかのように。本当はそうではなかった

• そうでない場合は、どうすれば修正できますか?(JSONP 画像はできないと思います...できるでしょうか?)

答え：画像の src の設定を続行し、load イベントがトリガーされるまで表示を待ちます。

• その場合、Firebug エラーを停止するにはどうすればよいですか?私ができる場合。(彼らは他の開発者たちを怖がらせています。)

答え：上と同じ -- 実際に画像ファイルの GET リクエストを実行するステップを削除します。

初期コード

function(imageUrl, placeTarget){
 var i = new Image();
 var img = $(i);
 img.hide()
 .load(imageUrl, function(e){
  // console.log("loadImage: loaded");
  placeTarget.attr("src", imageUrl);
  return true;
 })
 .error(function(){
  // error handling - do this part
  // console.log("loadImage: error");
  return false;
 });
 return;
} // loadImage

Answer 1

なぜ画像要素を作成し、SRCを設定することにより、ページに画像を挿入しません。単純に何ができるか？

編集：...ジャバスクリプト

を経由して

私は確かに、これは正確に正しいですが、jQueryのではありませんよ

img = $('<img>');
img.attr('src', 'http://somewhere.com/some_image.jpg');
$('#place_to_add').append(img);
img.ready(fade_into_next);

Answer 2

Checktこの記事： JavaScriptの同一生成元ポリシー - ？どのように異なるサブドメインには適用されないの