Javascript 我的所有浏览器都没有发送源标题

我正在尝试将图像加载到画布元素中，然后在toDataURL（）中拉出数据

我的站点运行RubyonRails 2.3

我的图像来自aws s3。我已经设置了cors：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

但这并没有发送源标题。所以我想我应该尝试通过jquery调用ajax

var outlineImage = new Image();
$(outlineImage).attr('crossOrigin', '');
$.ajax({
    type: 'get',
    url : drawing_image,
    contentType: 'image/png',
    crossDomain: 'true',
    success: function() {
        $(outlineImage).attr("src", drawing_image);
    },
    error: function() {
        console.log('ah crap');
    }
});

outlineImage.onload = function() {
 var canvas = document.getElementById('explain_canvas');
 var context = canvas.getContext("2d");

 context.drawImage(outlineImage, 10, 10, 600, 150);
}

但还是没有运气。我弄错了吗？jqueryajax应该发送源标题吗

我查看请求头，这是我在图像上看到的：

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:em2-images.s3.amazonaws.com
Referer:http://localhost:3000/courses/18/quizzes/22/take
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

jquery错误如下：

XMLHttpRequest cannot load http://em2-images.s3.amazonaws.com/EM2_LF_A_5_item6.png. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
ah crap

对我来说奇怪的是jquery声明了源代码，但它不在请求头中

此stackoverflow问题表示他希望删除原始标题。他正在用jquery-ajax做与我相同的调用，并得到了它。你知道为什么我不是吗

如果我重新加载页面，它会抓取缓存的图像并将其很好地加载（请注意原始标题），并调用toDataURL（）。在我清除缓存后，在缓存图像之前，第一次加载不会工作

我开始怀疑Rails是否对它做了什么，但我不知道它会做什么，因为这是一个ajax调用。但谁知道呢，有人知道Rails是否能做到这一点吗

我已经在不同平台上的多个浏览器中尝试过。Chrome、Firefox、Safari、IE 9和10。在我的Mac、PC和iPhone上。他们中的任何一个都不能掷骰子

---

-谢谢——

经过大量的脑力激荡后，我终于明白了为什么我的浏览器没有发送源标题

首先是一点背景知识。这是LMS，是测验的一部分。当教师编写测验时，他们将问题文本和图像添加到绘图画布中，以便学生用绘图解释答案

您可以猜到，该图像首先被加载。它在students视图中是隐藏的，我从该图像中获取src url，并尝试使用javascript将其放入canvas元素中

问题是第一次加载图像时，它没有使用crossorigin属性加载。因此，没有原始标题。当canvas元素尝试加载图像时，它会被缓存，而不会在其中包含原始标头。当它试图让cors运行时，它会呕吐。在我看来，这可能是一个所有浏览器都需要修复的bug。但也许不是

因此，在一个nutshell中，当执行cors时，确保图像的第一次加载带有crossorigin属性，以包含origin头。对我来说

---

是的，是时候进行重构了…

我收到了这个CORS错误，在服务器端，没有发送原始标头

---

我的问题是我在图像标签中设置了

crossOrigin=Anonymous

。删除它为我解决了问题，CORS错误也消失了。

谢谢！一旦我知道发生了什么，我就设法解决了这个问题，在url中添加了一个小的缓存破坏

GET

属性。必须为那些仍然卡住的添加一些东西。您的答案是正确的，但在获取缓存资源时，使同一个图像再次出现，它会删除原始标头。因此，如果需要缓存图像，请将其存储在javascript中，不要再次尝试请求它。我发现我试图提高效率的做法是在缓存项上抛出错误。啊，老兄！你救了我的星期五！这种行为相当麻烦。有一种简单的方法可以解决它：对后续请求使用缓存断路器。像这样：

http://mybucket.s3.aws.com/img.jpg?t=12345

。其中，

12345

是每个调用的随机字符串uniq。这将迫使浏览器忽略缓存并执行正确的服务器请求。现在是2020年，Chromium/Chrome/Brave中仍然存在这种情况。在Firefox/Safari中运行良好

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:em2-images.s3.amazonaws.com
Referer:http://localhost:3000/courses/18/quizzes/22/take
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

XMLHttpRequest cannot load http://em2-images.s3.amazonaws.com/EM2_LF_A_5_item6.png. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
ah crap