No 'Access-Control-Allow-Origin' error but image is rendered

Question

My project is hosted in a local web server.

Scenario A

When I try to access my test.html file via file:// it gives me

XMLHttpRequest cannot load http://127.0.0.1:8887/images/main/2.jpg. No 'Access-Control-Allow-Origin' header is test.html:1 present on the requested resource. Origin 'null' is therefore not allowed access.

in chrome console but photo is rendered properly in the modal

Scenario B

But when I try to access test.html via http://127.0.0.1:8887 it doesn't log any console error and it prints

��JFIF��Photoshop 3.08BIM}720120601<�130528-0500Z Baltimore_ MD - MarylandeUSA - United States detbal-crime2 PKarl Merton FerronUBaltimore Sun Staffn Baltimore SunsNA.1zNA.1xbA Baltimore Police officer stands behind crime scene tape at the scene of a police-involved shooting following a dispatch for a burglary in progress, reported near S. Chester Street and Bank Street in southeast Baltimore. A suspect was shot, while another was taken into custody as investigators pore through evidence. (Karl Merton Ferron/Baltimore Sun) iPOLICE INVOLVED SHOOTINGgBAL1206011517048420�0:0:0:-00001� 8BIM�8BIM ��hhttp://ns.adobe.com/xap/1.0/ Baltimore MD - Maryland USA - United States Baltimore Sun Staff Baltimore Sun NA.1 NA.1 POLICE INVOLVED SHOOTING BAL1206011517048420 2012-06-01T13:05:28-05:00 A Baltimore Police officer stands behind crime scene tape at the scene of a police-involved shooting following a dispatch for a burglary in progress, reported near S. Chester Street and Bank S

instead of rendering the image in the modal.

I actually don't really understand what's happening. I am trying to debug my gallery viewer jQuery plugin using bootstrap. The proper rendering of image only happens in Scenario A using chrome.

Other Findings:

When bootstrap css is not used, image is rendered properly

HTML (Scenario 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>

I need to fix this rendering of image. If I know how google chrome manage to render the image despite of the warning, that would help

score 6 · Accepted Answer · edited May 23 '17 at 12:25

The scenario A errors appear to be due to you performing a cross domain http request for an image without sending proper CORS headers (client and server side). If your site is also hosted at that local address and port I would make the image urls rooted like /demo/images/main/1.jpg as this will ensure they are hitting the same domain and scheme you are using to hit your site. The error that the console is throwing is telling you that the request for the image was made with an Origin header of null but although a valid response was received it did not contain an Access-Control-Allow-Origin response header with value * or null. If you are in control of the server, supplying * for that response header should pass CORS.

If you try and navigate directly to the image path in chrome, does it work http://127.0.0.1:8887/demo/images/thumbnail/1.jpg? If not then there is no hope of it working in an img tag.

If you open chrome dev tools and go to the network tab and then reload the page (enable preserve log checkbox), do you see any resources coming back red (non 200 / 304 status code)? If so, investigating the response headers and content of those requests could lead you to an answer.

Scenario a and b seem to be different issues. B seems like you may possibly be serving the images with an incorrect content-type or perhaps something with your modal CSS is hiding the image (doesn't explain where the weird police text is coming from). If you can embellish on what you are using server side to open the port and serve the images I might be able to help more. If this is node with express and express.static on the images directory, it should just work so long as your paths line up.

Additional:

Ensure your page is using HTML5 doctype (bootstrap requirement) - <!DOCTYPE html>
Try setting content type of your HTML page to UTF8 via meta charset tag.

No 'Access-Control-Allow-Origin' error but image is rendered

1 Answers1