我所有的浏览器都没有发送origin报头

all of my browsers are not sending the origin header

本文关键字：origin 报头 浏览器      更新时间：2023-09-26

我正在尝试将图像加载到画布元素中，然后在toDataURL()中取出数据。

我有我的网站运行Ruby on Rails 2.3

我有我的图像从aws s3服务。我已经设置好了:

<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:*/*
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问题在这里表示他想要删除origin头。他做了和我一样的调用jquery ajax并得到它。知道我为什么没有吗?

如果我重新加载页面，它会抓取缓存的图像并很好地加载它(请注意，带有origin标头)，并调用toDataURL()。在我清除缓存后，它将再次无法工作，直到第一次加载图像缓存。

我开始怀疑Rails是否对它做了一些事情，但我不知道它是如何做到的，因为这是一个ajax调用。但是谁知道呢，有人知道Rails能不能做到这一点吗?

我已经在不同平台上的几个浏览器中尝试过了。Chrome, Firefox, Safari, ie910. 在我的Mac, PC和iPhone上。没有骰子。

-谢谢,

在绞尽脑汁之后，我终于弄明白了为什么我的浏览器不发送起源头。

首先介绍一下背景。这是LMS的试题，也是测试的一部分。当老师编写测试时，他们会将问题文本和图像添加到绘图画布中，让学生用图画解释他们的答案。

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

问题是第一次加载图像时，它没有加载crossorigin属性。因此没有原点报头。当canvas元素试图加载图像时，它被缓存了，没有origin标头。而当它试图让人行动起来的时候，它就会受阻。在我看来，也许这是一个所有浏览器都需要修复的bug。但也许不是。

所以在一个简单的例子中，当做cors时，确保第一次加载图像是带有一个cross - origin属性，以获得包含的origin头。大调的我…

是时候重构了…

我正在得到这个CORS错误，并且在服务器端没有发送源标头。

我的问题是，我已经设置了crossOrigin = Anonymous在我的图像标签。删除它为我解决了问题，并且CORS错误消失了。

相关文章：