所有的浏览器都不发送原始标头 [英] all of my browsers are not sending the origin header
问题描述
我尝试将图片加载到canvas元素中，然后将数据拖到toDataURL（）中。
我的网站使用Ruby on Rails 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>
我有一个canvas元素：
< canvas id =explain_canvas>< / 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-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
连接：keep-alive
主机：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 Gecko）Chrome / 23.0.1271.101 Safari / 537.11
这里的jquery错误：
XMLHttpRequest无法加载http://em2-images.s3.amazonaws.com/EM2_LF_A_5_item6.png。原因http：// localhost：3000不允许Access-Control-Allow-Origin。
ah crap
对我来说奇怪的是jquery陈述起源，不在请求标头中。
此stackoverflow问题这里说明他要删除origin头。他正在做同样的电话，我用jquery ajax和得到它。
如果我重新加载页面，它抓取缓存的图像并加载它（原始标题头脑），并调用DataURL（）正好。
我开始想知道Rails是否正在做一些事情，但是我不知道该怎么做，因为这是一个ajax调用。但是谁知道，任何人都知道Rails是否可以这样做？
我在不同平台上的几个浏览器中尝试过。 Chrome，Firefox，Safari，IE 9& 10.在我的Mac，PC和iPhone。
经过大量的粉碎，我想出了为什么我的浏览器没有发送原始标题。
首先有一点背景。这是一个LMS，是测验的一部分。当老师作出测验时，他们将问题文本和图像添加到绘图画布中供学生用绘图解释他们的答案。
猜测，该图像首先加载。它是从学生视图隐藏的，我抓住src url的那个图像，并尝试使用javascript将其放入canvas元素。
是第一次加载图像时，不会加载crossorigin属性。因此没有origin头。在canvas元素尝试加载图像的时候，它被缓存而没有原始标头。当它试图得到cors去它barfs。似乎对我来说，也许这是一个错误，所有浏览器都需要修复。但是也许不是。
因此，在坚果shell中，当做cors时，确保图像的第一次加载有crossorigin属性，以获得原始头。
一个重构的时间...
I am trying to load an image into a canvas element and later pull the data out in toDataURL().
I have my site running with Ruby on Rails 2.3
I have my images serving from aws s3. I have setup 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>
I have a canvas element:
<canvas id="explain_canvas"></canvas>
Okay, so some background. I was originally trying this with code like this where drawing_image is just a url to the image.
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);
}
But that was not sending the origin header. So I thought I'd try an ajax call via jquery
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);
}
But still no luck. Am I mistaken? Should that jquery ajax send the origin header?
I look at the request header and this is what I get on the image:
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
And the jquery errors with this:
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
What is weird to me is the jquery states the origin, yet it is not in the request header.
This stackoverflow question here states he wants to remove the origin header. Well he is doing the same kind of call I am with jquery ajax and getting it. Any ideas why I am not?
If I reload the page, it grabs the cached image and loads it fine (with the origin header mind you) and calls toDataURL() just fine. After I clear the cache it again won't work that first load until the image is cached.
I started wondering if Rails was doing something to it, but I don't see how it would since this is an ajax call. But who knows, anyone know if Rails could do this?
I have tried this in several browsers on different platforms. Chrome, Firefox, Safari, IE 9 & 10. On my Mac, PC, and iPhone. No dice on any of them.
-Thanks-
After much brain smashing, I have figured out why my browser isn't sending the origin header.
First a little background. This is for an LMS and is part of a quiz. When the teacher authors the quiz, they add the question text and an image to go into the a drawing canvas for students to explain their answer with a drawing.
As you can guess, that image gets loaded first. It is hidden from the students view, and I grab the src url off that image and try to put it into the canvas element using the javascript.
Well the problem with that is the first time the image is loaded, it is not loaded with the crossorigin attribute. Thus no origin header. And by the time the canvas element is trying to load the image, it is cached without having the origin header in there. And when it tries to get cors going it barfs. Seems to me like maybe this is a bug that all browsers need to fix. But perhaps not.
So in a nut shell, when doing cors, make sure the first load of an image is with a crossorigin attribute to get the origin header included. dur me...
Yup, time for a refactor...
这篇关于所有的浏览器都不发送原始标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
