javascript - Amazon S3 奇怪的 CORS 行为 : No 'Access-Control-Allow-Origin' header is present on the requested resource-6ren

javascript - Amazon S3 奇怪的 CORS 行为 : No 'Access-Control-Allow-Origin' header is present on the requested resource

转载作者：行者123 更新时间：2023-12-03 00:16:31

27

4

我正在亚马逊 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 中找到。 .

关于javascript - Amazon S3 奇怪的 CORS 行为 : No 'Access-Control-Allow-Origin' header is present on the requested resource，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54513634/

27

4

0

文章推荐： ruby-on-rails - 如何在js渲染部分中传递html_safe字符串

文章推荐： PHP 面向对象 - 真实案例

文章推荐： elasticsearch - 按列而不是行显示Kibana数据表聚合

javascript - 谷歌地图自动完成弹回已经清除的文本......奇怪......奇怪......奇怪
我有这种来自 Google map 自动完成的奇怪行为(或者我可能错过了某事)...想法？奇怪的: 您在输入中输入某物，例如“伦敦” 您按 [ENTER] 你按下 [CLEAR] 按钮你点击进入'输
Java意外类型做字符串比较，奇怪
这段代码与《Learning Java》(Oracle Press Books)一书中的代码完全一样，但它不起作用。我不明白为什么它不起作用，它应该起作用。我用 OpenJDK 和 Sun JDK 7
Powershell 对新行使用反引号 - 奇怪
示例 1 中究竟发生了什么？这是如何解析的？ # doesnt split on , [String]::Join(",",("aaaaa,aaaaa,aaaaa,aaaaa,aaaaa,aa
iphone - 指针类型不兼容？？奇怪
我需要获得方程式系统的解决方案。为此，我使用函数sgesv_()。一切都很好，它使我感到解决方案的正确结果。但是我得到一个奇怪的警告。警告:从不兼容的指针类型传递'sgesv_'的参数3 我正在
ios - 奇怪!动画完成后是否一直调用函数？
我目前在制作动画时遇到一个奇怪的问题: [UIView animateWithDuration:3 delay:0
jQuery 不工作 - 奇怪
alert('works'); $(window).load(function () { alert('does not work'); });
java - 静态内部类 - 奇怪
我的代码: public class MyTest { public class StringSorter implements Comparator { public
JavaScript 对象更新行为(奇怪？)
我正在学习 JavaScript。尝试理解代码， function foo (){ var a = b = {name: 'Hai'}; document.write(a.name +''
c++ - GetLastError() != 奇怪
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
Linux 环境 -i 奇怪
这按预期工作: [dgorur@ted ~]$ env -i env [dgorur@ted ~]$ 这样做: [dgorur@ted ~]$ env -i which date which: no
c++ - 指针增量 - 奇怪
struct BLA { int size_; int size()const{ return size_; } } int x; BLA b[ 2 ]; BLA * p = &b[
css - 图像垂直对齐与 css - 奇怪
我有以下代码: #test img {vertical-align: middle;} div#test { border: 1px solid green; height: 150px; li
gcc - (奇怪？)GCC 预处理器行为
我想大多数使用过 C/C++ 的人都对预处理器的工作原理有一定的直觉(或多或少)。直到今天我也是这么认为的，但事实证明我的直觉是错误的。故事是这样的: 今天我尝试了一些东西，但我无法解释结果。首先考虑
OCMock只生效一次，奇怪，为什么？或者我这边有什么问题？
我想为 TnSettings 做 mock，是的，如果通过以下方法编写代码，它就可以工作，问题是我们需要为每个案例编写 mock 代码，如果我们只 mock 一次然后执行多个案例，那么第二个将报告异常
c - 溢出？找不到来源，奇怪
我的项目中有以下两个结构 typedef volatile struct { unsigned char rx_buf[MAX_UART_BUF]; //Input buffer over U
c# - 奇怪，regex.split方法匹配一个null元素
Regex rx = new Regex(@"[+-]"); string[] substrings = rx.Split(expression); expression = "-9a3dcb
java - JDBC 连接被对等方关闭(奇怪)
我的两个应用程序遇到了一个奇怪的问题。这是设置: 两个 tomcat/java 应用程序，在同一个网络中运行，连接到相同的 MS-SQL-Server。一个应用程序，恰好按顺序位于 DMZ 中可从互联
Android OnLongClickListener 奇怪/不可靠的行为
我目前正在与 Android Api Lvl 8 上的 OnLongClickListener 作斗争。拿这段代码: this.webView.setOnLongClickListener(new
java - JUnit 奇怪 - 我未指定预期数量
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
objective-c - performSelectorOnMainThread 奇怪
只是遇到了奇怪的事情。我有以下代码: -(void)ImageDownloadCompleat { [self performSelectorOnMainThread:@selector(up

首页

博学

6Ren·AI

商城

javascript - Amazon S3 奇怪的 CORS 行为 : No 'Access-Control-Allow-Origin' header is present on the requested resource