wszystkie moje przeglądarki nie wysyłają nagłówka źródła

Question

Próbuję załadować obraz do elementu canvas, a później wyciągnąć dane w toDataURL().

Mam witryny uruchomiony z Ruby on Rails 2.3

mam moje obrazy służąc z AWS S3. Mam Cors Setup:

<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> 

Mam elementu canvas:

<canvas id="explain_canvas"></canvas> 

Ok, więc jakieś tło. Początkowo próbowałem tego z takim kodem, w którym rysunek_obrazu jest po prostu adresem URL obrazu.

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); 
} 

Ale to nie było wysyłanie nagłówka początkowego. Pomyślałem więc, że spróbuję wywołać ajax przez 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); 
} 

Ale wciąż nie ma szczęścia. Czy się mylę? Czy ten jquery ajax powinien wysłać nagłówek pochodzenia?

patrzę na nagłówku żądania i to, co mam na zdjęcie:

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 

I jQuery błędów z tym:

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 

Co jest dziwne dla mnie jest stany jquery pochodzenie, ale nie znajduje się w nagłówku żądania.

To pytanie stackoverflow here stwierdza, że ​​chce usunąć nagłówek pochodzenia. Cóż, on robi ten sam rodzaj połączenia z ajaxem jquery i otrzymuję go. Jakieś pomysły, dlaczego nie jestem?

Po ponownym załadowaniu strony, pobiera obraz z pamięci podręcznej i ładuje go dobrze (z nagłówkiem początku wiadomości) i wywołuje funkcję DataLog() w porządku. Po wyczyszczeniu pamięci podręcznej ponownie nie będzie działać pierwsze ładowanie, dopóki obraz nie zostanie zapisany w pamięci podręcznej.

Zacząłem się zastanawiać, czy Rails coś z tym robi, ale nie widzę, jak by to było, ponieważ jest to wywołanie ajax. Ale kto wie, czy ktoś wie, czy Rails może to zrobić?

Próbowałem tego w kilku przeglądarkach na różnych platformach. Chrome, Firefox, Safari, IE 9 & 10. Na moim Macu, PC i iPhonie. Na żadnym z nich nie ma kości.

-Thanks-

Answer 1

Po wielu mózg rozbijając, że zorientowali się, dlaczego moja przeglądarka nie wysyła nagłówek pochodzenia.

Najpierw małe tło. To jest dla LMS i jest częścią quizu. Kiedy nauczyciel autorów quizu, dodaje tekst pytania i obraz, aby przejść do płótna rysunku dla uczniów, aby wyjaśnić swoją odpowiedź za pomocą rysunku.

Jak można się domyślić, obraz zostanie załadowany jako pierwszy. Jest ukryty przed widokiem uczniów, a ja ściągam URL src z tego obrazu i próbuję umieścić go w elemencie canvas przy użyciu javascript.

Problem z tym, że po raz pierwszy obraz jest załadowany, nie jest załadowany atrybutem crossorigin.Zatem nie ma nagłówka pochodzenia. A do czasu, gdy element canvas próbuje załadować obraz, jest on buforowany bez nagłówka początkowego. A kiedy próbuje uzyskać corsy, będzie to barfs. Wydaje mi się, że może to błąd, który wszystkie przeglądarki muszą naprawić. Ale może nie.

Tak więc w przypadku orzechów, podczas robienia cors, upewnij się, że pierwsze obciążenie obrazu jest z atrybutem crossorigin, aby uzyskać nagłówek pochodzenia. Dur mnie ...

Tak, czas na Refactor ...

Answer 2

ja otrzymuję ten błąd CORS, aw serwerze skończyć nagłówek pochodzenie nie była wysłana.

Problem polegał na tym, że w moim tagu graficznym ustawiłem crossOrigin = Anonymous. Usunięcie, które rozwiązało dla mnie problem, i błąd CORS zniknął.