我在亚马逊S3存储图像。
我用我的水桶这个CORS配置:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>https://www.monteurzimmer-1a.de</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
我也有斗规则:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-bucket/*"
}
]
}
问题是:
我的图片一般都是可见的,没有任何问题,在我增加了一个脚本根据自己的EXIF数据来旋转图像出现错误。
现在,如果您访问的页面(就是图像旋转)的第一次,你仍然可以看到图像,但不应用旋转和我看到的错误在控制台为每个图像:... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
但是,如果你重新载入页面一次,比错误消失和旋转应用。您可以通过使用隐身模式重现该问题。
在隐身模式下访问this page。图像将待观察,但旋转将是错误的,出现在控制台中的错误。按F5键和错误消失,应用旋转。
我的假设就是有事做缓存,但是旋转脚本不在S3。
这是我的应用旋转:
<img class="display-none" id="room_image_{{ loop.index }}"
onload="rotate_image(this)" alt="Zimmer Bild"
src="https://s3.eu-central-1.amazonaws.com/my-bucket/userimages/{{ image.path }}">
这里是JS的部分:
function adjust_to_container($img, deg) {
//console.log($img);
//var parentHeight = $img.parent().height();
var parentHeight = $img.parentElement.clientHeight;
//console.log(parentHeight);
if (deg == 90 || deg == 270) {
$img.style.maxWidth = parentHeight + "px";
//$img.css("max-width", parentHeight + "px");
}
}
function rotate_image($img) {
EXIF.getData($img, function() {
console.log('Exif=', EXIF.getTag($img, "Orientation"));
switch(parseInt(EXIF.getTag($img, "Orientation"))) {
case 2:
//$img.addClass('flip');
$img.classList.add("flip");
adjust_to_container(this, 180);
break;
case 3:
//$img.addClass('rotate-180');
$img.classList.add("rotate-180");
adjust_to_container(this, 180);
break;
case 4:
//$img.addClass('flip-and-rotate-180');
$img.classList.add("flip-and-rotate-180");
adjust_to_container(this, 180);
break;
case 5:
//$img.addClass('flip-and-rotate-270');
$img.classList.add("flip-and-rotate-270");
adjust_to_container(this, 270);
break;
case 6:
//$img.addClass('rotate-90');
$img.classList.add("rotate-90");
adjust_to_container(this, 90);
break;
case 7:
//$img.addClass('flip-and-rotate-90');
$img.classList.add("flip-and-rotate-90");
adjust_to_container(this, 90);
break;
case 8:
//$img.addClass('rotate-270');
$img.classList.add("rotate-270");
adjust_to_container(this, 270);
break;
}
});
}
该exif.js
和这个脚本的HTML <HEAD>
被加载,因为他们必须在那里被载入图像之前。
任何想法,为什么这会触发一个CORS问题?
编辑
我的假设就是有事情做与EXIF.js.它采用XMLHttpRequest
处理图像。这里是exit.js I use:
编辑
看来这个问题只发生在Chrome浏览器,这意味着该CORS配置好吗?
我加crossorigin="anonymous"
图像标签上,它似乎在错误消失。
<img class="display-none" id="room_image_{{ loop.index }}"
onload="rotate_image(this)" crossorigin="anonymous" alt="Zimmer Bild"
src="https://s3.eu-central-1.amazonaws.com/my-bucket/userimages/{{ image.path }}">
一个小的解释可以在accepted answer here找到。