'Access-Control-Allow-Origin'エラーは発生しませんが、イメージはレンダリングされます

Question

私のプロジェクトはローカルWebサーバーでホストされています。

シナリオ

私はfile://経由で私のtest.htmlファイルにアクセスしようとすると、それは私に http://127.0.0.1:8887/images/main/2.jpgをロードすることはできません

のXMLHttpRequestを与えます。いいえ 'Access-Control-Allow-Origin'ヘッダーは、要求されたリソースの に存在するtest.html：1です。したがって、原点「ヌル」はアクセスが許可されません。クロムコンソールで

が、写真はモーダル

シナリオB

で正しくレンダリングされます。しかし、私はhttp://127.0.0.1:8887経由test.htmlというにアクセスしようとすると、それは、任意のコンソールエラーをログに記録し、それはありませんプリント

JFIFPhotoshop 3.08BIM} 720120601 < 130528-0500Z Baltimore_ MD - メリーlandeUSA - 米国detbal-crime2 PKarlマートン FerronUBaltimore日StaffnボルチモアSunsNA.1zNA.1xbA ボルチモア警察官が近く報告、 進行中の強盗のディスパッチ以下の警察関与撮影のシーン で犯罪現場のテープの後ろに立っていますS.チェスターストリートとバンクストリートは南東に ボルチモア。容疑者は射殺されたが、別の者は捜査官が証拠を通じて孔を開けた と拘束された。 0：0：-00001 8BIM8BIMのhhttp：（カール・マートンフェロン/ボルティモア 日）iPOLICEは SHOOTINGgBAL12060115170484200かかわる - メリーランドUSAボルチモアMD //ns.adobe.com/xap/1.0/を - アメリカボルチモアサンスタッフボルティモアサンNA.1 NA.1警察が関与する場面でボルティモア警察官が後ろに立っている 警察関係のシーンで犯行シーンテープ S.チェスターストリート そば報告進行中の強盗のための派遣、および銀行S

の代わりに、画像をレンダリングする次の撮影モーダルで。

実際に何が起こっているのか分かりません。私は、ブートストラップを使ってギャラリービューアのjQueryプラグインをデバッグしようとしています。画像の適切なレンダリングは、シナリオAでクロムを使用してのみ行われます。

その他の所見：

• ブートストラップCSSを使用しない場合は、画像が正しく

HTML（シナリオA）

<div class="modal-content"> 
     <div class="modal-header" style="height: 41.79px;"> 
      <h4>Case Media</h4> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true"><span aria-hidden="true">×</span></button> 
     </div> 
     <div class="modal-body"> 
      <div id="infopsy"> 
       <div class="row iv-frame row-centered embed-responsive"><img class="img-responsive col-centered fadeIn" src="http://127.0.0.1:8887/demo/images/main/2.jpg"></div> 
       <div class="row col-height-equal"> 
        <div class="vertical-align col-xs-1 col-sm-1 col-md-1 col-lg-1 iv-thumbcaret" data-iv-direction="left"><i class="fa fa-angle-left fa-4x" id="icon-angle"></i></div> 
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 iv-thumbnails row-centered"> 
        <div class="col-xs-4 col-sm-3 col-md-2 col-lg-2 col-centered center-cropped"><a href="http://127.0.0.1:8887/demo/images/main/1.jpg"><img src="http://127.0.0.1:8887/demo/images/thumbnail/1.jpg" class="iv-thumbnail-current img-responsive" data-iv-index="0"></a></div> 
        <div class="col-xs-4 col-sm-3 col-md-2 col-lg-2 col-centered center-cropped"><a href="http://127.0.0.1:8887/demo/images/main/2.jpg"><img src="http://127.0.0.1:8887/demo/images/thumbnail/2.jpg" class=" img-responsive" data-iv-index="1"></a></div> 
        <div class="hidden-xs col-xs-4 col-sm-3 col-md-2 col-lg-2 col-centered center-cropped"><a href="http://127.0.0.1:8887/demo/images/main/3.jpg"><img src="http://127.0.0.1:8887/demo/images/thumbnail/3.jpg" class=" img-responsive" data-iv-index="2"></a></div> 
        <div class="hidden-sm hidden-xs col-xs-4 col-sm-3 col-md-2 col-lg-2 col-centered center-cropped"><a href="http://127.0.0.1:8887/demo/images/main/4.jpg"><img src="http://127.0.0.1:8887/demo/images/thumbnail/4.jpg" class=" img-responsive" data-iv-index="3"></a></div> 
        <div class="hidden-md hidden-sm hidden-xs col-xs-4 col-sm-3 col-md-2 col-lg-2 col-centered center-cropped"><a href="http://127.0.0.1:8887/demo/images/main/5.jpg"><img src="http://127.0.0.1:8887/demo/images/thumbnail/5.jpg" class=" img-responsive" data-iv-index="4"></a></div> 
        <div class="hidden-lg hidden-md hidden-sm hidden-xs col-xs-4 col-sm-3 col-md-2 col-lg-2 col-centered center-cropped"><a href="http://127.0.0.1:8887/demo/images/main/6.jpg"><img src="http://127.0.0.1:8887/demo/images/thumbnail/6.jpg" class=" img-responsive" data-iv-index="5"></a></div> 
        </div> 
        <div class="vertical-align col-xs-1 col-sm-1 col-md-1 col-lg-1 iv-thumbcaret" data-iv-direction="right"><i class="fa fa-angle-right fa-4x" id="icon-angle"></i></div> 
       </div> 
      </div> 
     </div> 
     </div> 

をレンダリングしている私は、このレンダリングを修正する必要があります画像の私は、Google Chromeの警告があっても画像をレンダリングする方法を知っていれば、それは助けになるでしょう

Answer 1

シナリオAエラーは、適切なCORSヘッダーを送信せずに画像のクロスドメインHTTPリクエストを実行したために発生しますサーバ側）。あなたのサイトがそのローカルアドレスとポートでホストされている場合、画像URLは/demo/images/main/1.jpgのようになります。これにより、あなたがあなたのサイトにヒットするために使用しているのと同じドメインとスキームを確実に使用できるようになります。コンソールがスローしているエラーは、ヘッダーがnullであるが、有効な応答が受信されたにもかかわらず、*またはnullのレスポンスヘッダーが含まれていないことを示しています。サーバーを制御している場合は、その応答ヘッダーに*を指定すると、CORSが渡されます。

クロムの画像パスに直接移動すると、http://127.0.0.1:8887/demo/images/thumbnail/1.jpgは機能しますか？そうでなければ、imgタグで作業することは期待できません。

chrome dev toolsを開いて[ネットワーク]タブに移動してページをリロードすると（ログを保存するチェックボックスを有効にする）、赤色に戻るリソース（200/304以外のステータスコード）が表示されますか？もしそうなら、それらの要求の応答ヘッダーと内容を調べることで、あなたは答えにつながる可能性があります。

シナリオaとbは異なる問題であるようです。 Bは恐らくあなたが誤ったコンテンツタイプの画像を提供しているか、モーダルCSSの画像が画像を隠しているようです（奇妙な警察のテキストがどこから来ているかを説明していません）。あなたがポートを開き、画像を提供するためにサーバー側を使用しているものを飾ることができるなら、私はもっと助けることができるかもしれません。これが画像ディレクトリにあるexpressとexpress.staticのノードであれば、パスが並んでいる限り動作します。追加

：

1. あなたのページはHTML5のDOCTYPE（ブートストラップ要件）を使用していることを確認 - <!DOCTYPE html>
2. meta charsettag経由でUTF8にHTMLページのコンテンツタイプを設定してみてください。