我的所有浏览器都没有发送原始标题
我正在尝试将图像加载到canvas元素中，然后将数据拉出到toDataURL（）中。
我的网站运行Ruby on Rails 2.3
我的照片来自aws s3。 我有设置cors：
* GET HEAD 3000 * 我有一个canvas元素：
好的，所以有些背景。 我最初尝试使用这样的代码，其中drawing_image只是图像的URL。
var outlineImage = new Image(); outlineImage.crossOrigin = ''; outlineImage.src = drawing_image; outlineImage.onload = function() { var canvas = document.getElementById('explain_canvas'); var context = canvas.getContext("2d"); context.drawImage(outlineImage, 10, 10, 600, 150); }
但那不是发送原始标题。 所以我以为我会通过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); }
但仍然没有运气。 我错了吗？ 该jquery ajax应该发送原始标头吗？
我查看请求标头，这是我在图像上得到的：
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，是测验的一部分。 当教师编写测验时，他们会将问题文本和图像添加到绘图canvas中，供学生用绘图解释他们的答案。
你可以猜到，该图像首先被加载。 它隐藏在学生视图中，我从该图像中获取src url并尝试使用javascript将其放入canvas元素中。
那么问题是第一次加载图像时，它没有加载crossorigin属性。 因此没有原始标题。 当canvas元素尝试加载图像时，它会被缓存，而不会有原始标题。 而当它试图让cors去吧barfs。 在我看来，这可能是所有浏览器需要修复的错误。 但也许不是。
所以在坚果壳中，当做cors时，确保图像的第一次加载具有crossorigin属性以包含原始头。 我…
是的，重构的时间……
我收到此CORS错误，并在服务器端没有发送原始标头。
对我来说问题是我在我的图片标签中设置了crossOrigin = Anonymous 。 删除它解决了我的问题，CORS错误消失了。