我所有的浏览器都没有发送原始标头 [英] all of my browsers are not sending the origin header
问题描述
我正在尝试将图像加载到画布元素中，然后在 toDataURL() 中提取数据.
I am trying to load an image into a canvas element and later pull the data out in toDataURL().
我的网站运行 Ruby on Rails 2.3
I have my site running with Ruby on Rails 2.3
我的图片来自 aws s3.我已经设置了 cors:
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>
我有一个画布元素:
<canvas id="explain_canvas"></canvas>
好的，介绍一下背景.我最初是用这样的代码来尝试这个的，其中drawing_image只是图像的一个url.
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);
}
但这并没有发送原始标头.所以我想我会尝试通过 jquery 进行 ajax 调用
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);
}
但仍然没有运气.我错了吗?那个 jquery ajax 应该发送源头吗?
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
和 jquery 错误:
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
令我感到奇怪的是 jquery 声明了来源，但它不在请求标头中.
What is weird to me is the jquery states the origin, yet it is not in the request header.
这个 stackoverflow 问题此处表明他想删除源头.好吧，他正在使用 jquery ajax 进行相同类型的调用并获取它.知道为什么我不是吗?
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?
如果我重新加载页面，它会抓取缓存的图像并加载它(注意原始标题)并调用 toDataURL() 就好了.在我清除缓存后，在缓存图像之前，它不会再次加载第一次加载.
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.
我开始怀疑 Rails 是否对它做了什么，但我不知道它会如何，因为这是一个 ajax 调用.但谁知道呢，谁知道 Rails 能不能做到这一点?
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?
我已经在不同平台的多个浏览器中尝试过这个.Chrome、Firefox、Safari、IE 9 &10. 在我的 Mac、PC 和 iPhone 上.他们中的任何一个都没有骰子.
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.
-谢谢-
推荐答案
经过深思熟虑，我找到了为什么我的浏览器不发送原始标头的原因.
After much brain smashing, I have figured out why my browser isn't sending the origin header.
首先介绍一下背景.这是针对 LMS 的，是测验的一部分.教师在编写测验时，将问题文本和图像添加到绘图画布中，让学生用绘图解释他们的答案.
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.
如您所料，该图像首先加载.它隐藏在学生视图中，我从该图像中获取 src url 并尝试使用 javascript 将其放入画布元素中.
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.
问题是第一次加载图像时，它没有加载 crossorigin 属性.因此没有源头.并且当画布元素尝试加载图像时，它会在没有原始标题的情况下被缓存.当它试图让 cors 运转时，它会呕吐.在我看来，这可能是所有浏览器都需要修复的错误.但也许不是.
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.
所以简而言之，在做 cors 时，请确保图像的第一次加载具有 crossorigin 属性以包含原始标题.在我...
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屋！
