Error "Access-Control-Allow-Origin", but the image is displayed

Question

My project is hosted on 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 - test.html: 1 is present on the requested resource. Therefore, the original 'null' is not allowed.

in the chrome console, but the photo is displayed correctly in the modal

Scenario b

But when I try to access test.html through http://127.0.0.1:8887 , it does not log any errors in the console and prints

JFIFPhotoshop 3.08BIM} 720120601 <1303028-0500Z Baltimore_ MD - MarylandeUSA - United States detbal-crime2 PKarl Merton FerronUBaltimore Sun Staffn Baltimore SunsNA.1zNA.1xbA Baltimore policeman stands behind the crime scene at the scene of a police shooting after being sent for burglary in progress reported near S. Chester Street and Bank Street in southeast Baltimore. The suspect was shot, and the other was taken into custody, as investigators exposed evidence. (Karl Merton Ferron / Baltimore Sun) iPOLICE INVOLVED SHOOTINGgBAL12060115170484200: 0: 0: -00001 8BIM 8BIM hhttp: //ns.adobe.com/xap/1.0/ Baltimore MD - Maryland USA - USA Baltimore Sun State Baltimore Sun NA.1 NA .1 POLICE ATTRACTIVE SHOOTING BAL1206011517048420 2012-06-01T13: 05: 28-05: 00 Baltimore police officer stands behind the crime scene tape at the scene of the police shooting departure for burglary, reported near S. Chester and Bank S

instead of rendering the image in modal mode.

I really don't understand what is going on. I am trying to debug jQuery plugin to view gallery using bootstrap. Correct image display only occurs in scenario A using chrome.

Other findings:

• When bootstrap css is not used, the image is displayed correctly

HTML (script 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 image rendering. If I know how google chrome deletes an image despite the warning, this would help

Answer 1

Scenario A errors occur because you are making an HTTP cross-domain request for an image without sending the corresponding CORS headers (client and server). If your site is also hosted at this local address and port, I would use image URLs such as /demo/images/main/1.jpg , as this will ensure that they fall into the same domain and scheme that you use to get to your site. The error that the console launches tells you that the image request was made with the Origin null header, but although the correct answer was received, it did not contain the Access-Control-Allow-Origin response header with the value * or null . If you control the server, the supply * for this response header must pass CORS.

If you try to go 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 that it works in the img tag.

If you open the hrome dev tools and go to the network tab and then reload the page (enable the log saving log), will you see any resources that are returned in red (status code is not 200/304)? If so, examining the response headers and the contents of these requests may lead you to an answer.

Scenarios a and b seem to be different problems. It seems like you may be displaying images with the wrong type of content, or perhaps something with your modal CSS is hiding the image (doesn't explain where the strange police text comes from). If you can decorate what you use on the server side to open the port and serve the images, I could help more. If it is a node with expression and express.static in the image directory, it should only work as long as your paths line up.

Additionally:

• Make sure your page uses the HTML5 method (bootstrap requirement) - <!DOCTYPE html>
• Try setting the content type of your HTML page to UTF8 via the tag meta code .