все мои браузеры не отправляют заголовок origin

Я пытаюсь загрузить изображение в элемент 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);
}

но это не отправляла заголовок происхождения. Поэтому я решил попробовать вызов ajax через 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 отправить заголовок origin?

Я смотрю на заголовок запроса, и это то, что я получаю на изображении:

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, IE 9 & 10. На моем Mac, ПК и iPhone. Ни на одном из них нет шансов.

спасибо

2 ответов


после большого разрушения мозга я понял, почему мой браузер не отправляет заголовок origin.

сначала немного предыстории. Это для LMS и является частью викторины. Когда учитель авторы викторины, они добавляют текст вопроса и изображение, чтобы пойти в рисунок холст для студентов, чтобы объяснить свой ответ с рисунком.

Как вы можете догадаться, это изображение загружается первым. Он скрыт от просмотра студентов, и я хватаю url-адрес src с этого изображения и пытаюсь чтобы поместить его в элемент canvas с помощью javascript.

Ну проблема в том, что при первой загрузке изображения он не загружается атрибутом crossorigin. Таким образом, нет заголовка origin. И к тому времени, когда элемент canvas пытается загрузить изображение, он кэшируется без заголовка origin. И когда он пытается заставить cors идти, его тошнит. Мне кажется, что, возможно, это ошибка, которую все браузеры должны исправить. Но, пожалуй, нет.

Так, в скорлупе ореха, при выполнении cors убедитесь, что первая загрузка изображения имеет атрибут crossorigin для включения заголовка origin. дур меня...

Да, время для рефакторинга...


Я получал эту ошибку CORS, и в конце сервера заголовок origin не отправлялся.

проблема для меня заключалась в том, что я установил crossOrigin = Anonymous в моем теге изображения. Удаление этого решило проблему для меня, и ошибка CORS исчезла.