jQuery的彩盒显示的是亚马逊的S3图像的二进制，而不是实际的图像

Question

我在用的彩盒

http://www.jacklmoore.com/colorbox/

只是想一个简单的例子，以获得从S3加载图像时选择的缩略图

例HTML：

<a class="fpg" href="https://s3.amazonaws.com/bucket/image" ><img src="https://s3.amazonaws.com/bucket/image" /></a> 

JavaScript示例：

$(".fpg").colorbox({ rel:'fpg',current:false}); 

缩略图加载正常。但是当我点击一个拇指和彩盒开始加载真正的S3图像时，我得到了这个错误。

No 'Access-Control-Allow-Origin' header is present on the requested resource. 

我在本地服务器上运行它。

所以我改变了S3桶的CROS配置为默认

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Authorization</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

现在，当我在颜色框加载图像，它只是加载了一大堆二进制的。我可以看到PNG IHDR，我认为它是二进制文件的一部分。

有谁知道如何正确加载S3映像？

感谢

Answer 1

我想这是较晚，但今天我也有类似的问题，我通过使用HTML属性， 添加设置这样解决：

html:'<img src="'+$(this).attr('href')+'">' 

建设颜色框时。

你只是告诉与HTML填补了预览，当然你需要让你想申请颜色框来结束了做这样的事情

$('.classIwantToApplyColorboxTo').each(function(){ 
$(this).colorbox({ 
html:'<img src="'+$(this).attr('href')+'">' 
       }); 
}); 

这招可以解决甚至XMLHttpRequest的错误参考。