没有'Access-Control-Allow-Origin'错误但是渲染了图像

Question

我的项目托管在本地Web服务器上.

情景A.

当我尝试test.html通过file://它访问我的文件给我

XMLHttpRequest无法加载 http://127.0.0.1:8887/images/main/2.jpg.没有'Access-Control-Allow-Origin'标头是test.html:1存在于请求的资源上.因此不允许原点'null'访问.

在chrome控制台中,但照片在模式中正确呈现

情景B

但是当我尝试通过http://127.0.0.1:8887它访问test.html时,它不会记录任何控制台错误并打印出来

JFIF Photoshop3.08BIM} 720120601 < 130528-0500ZBaltimore_ MD - MarylandeUSA - 美国detbal-crime2 PKarl Merton FerronUBaltimore Sun Staffn Baltimore SunsNA.1zNA.1xbA巴尔的摩警察站在现场犯罪现场磁带背后据报道,巴尔的摩东南部的S. Chester街和银行街附近发生了一起警方涉嫌枪击事件.一名嫌疑人被枪杀,另一名被羁押,因为调查人员通过证据.(Karl Merton Ferron/Baltimore Sun)iPOLICE INVOLVEDSHOOTINGgBAL1206011517048420 0:0:0:-00001 8BIM 8BIM hhttp://ns.adobe.com/xap/1.0/ Baltimore MD - Maryland USA - United States Baltimore Sun工作人员巴尔的摩太阳队NA.1 NA.1警方参与拍摄BAL1206011517048420 2012-06-01T13:05:28-05:00巴尔的摩警察站在犯罪现场录像带后面,警方参与枪击事件发生后入室盗窃正在进行中,在S. Chester Street和Bank S附近报道

而不是在模态中渲染图像.

我实际上并不真正了解发生了什么.我正在尝试使用bootstrap调试我的gallery viewer jQuery插件.正确渲染图像仅在方案A中使用chrome进行.

其他调查结果:

• 如果未使用bootstrap 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>

我需要修复这个图像渲染.如果我知道谷歌浏览器如何设置渲染图像尽管有警告,这将有所帮助

Answer 1

方案A错误似乎是由于您为映像执行跨域http请求而未发送正确的CORS标头(客户端和服务器端).如果您的网站也托管在该本地地址和端口,我会将图片网址设置为根,/demo/images/main/1.jpg因为这样可以确保他们使用相同的域名和方案来访问您的网站.控制台抛出的错误告诉您图像的请求是使用Origin标头进行的,null但是虽然收到了有效的响应但是它没有包含Access-Control-Allow-Origin值*或的响应标头null.如果您控制服务器,*则为该响应头提供应该通过CORS.

如果您尝试直接导航到chrome中的图像路径,它是否有效http://127.0.0.1:8887/demo/images/thumbnail/1.jpg？如果没有,则没有希望它在img标签中工作.

如果您打开chrome dev工具并转到网络选项卡然后重新加载页面(启用保留日志复选框),您是否看到任何资源返回红色(非200/304状态代码)？如果是这样,调查这些请求的响应标头和内容可能会引导您找到答案.

情景a和b似乎是不同的问题.B似乎您可能正在使用不正确的内容类型提供图像,或者您的模态CSS隐藏图像(不解释奇怪的警察文本来自哪里).如果您可以修饰您使用服务器端打开端口并提供图像,我可能会提供更多帮助.如果这是在images目录中使用express和express.static的节点,只要你的路径排成一行就应该工作.

额外:

1. 确保您的页面使用HTML5 doctype(引导程序要求) - <!DOCTYPE html>
2. 尝试通过元字符集 将HTML页面的内容类型设置为UTF8 tag.