Płótno z Image ładowane z AWS S3 korzystających Cors nie działa kilka pierwszych obciążeń

Question

Więc mam setup Cors na moim AWS S3 wiadra:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    </CORSRule> 
</CORSConfiguration> 

W moim html

<div id="explain_canvas"></div> 

w moim javascript Ładuję obraz i umieszczam go na obrazie.

var outlineImage = new Image(); 
outlineImage.crossOrigin = ''; 
outlineImage.src = drawing_image; 
outlineImage.onload = function() { 
    var canvasDiv = document.getElementById('explain_canvas'); 
    var canvas = document.createElement('canvas'); 
    canvas.setAttribute('width', 722); 
    canvas.setAttribute('height', 170); 
    canvas.setAttribute('id', 'canvas_'+canvas_element); 
    canvas.setAttribute('name', 'canvas_'+canvas_element); 
    canvasDiv.appendChild(canvas); 
    if(typeof G_vmlCanvasManager != 'undefined') { 
    canvas = G_vmlCanvasManager.initElement(canvas); 
    } 
    var context = canvas.getContext("2d"); 
    context.drawImage(outlineImage, 10, 10, 600, 150); 
} 

Załaduję kontekst w taki sposób, aby był kompatybilny z eksploratorem internetowym.

Oto mój problem. Gdy strona ładuje pierwsze dwa razy, to wyjdzie z tego błędu:

Cross-origin image load denied by Cross-Origin Resource Sharing policy. 

Jednak, kiedy odświeżyć stronę kilka razy, w końcu ulegnie pracy i załadować obraz. Gdy to zrobię, uda mi się skutecznie wywołać metodęDataURL() na elemencie canvas.

Czy ktoś wie, dlaczego tak się dzieje? Czy popełniłem błąd? Czy to jest problem z AWS i po prostu muszę poczekać, aż Amazon naprawi kordy?

To się dzieje we wszystkich przeglądarkach, które przetestowałem. W przeglądarce Chrome, Firefox, Safari, IE. Na moim Macu, komputerze i telefonie iPhone. Więc nie sądzę, że jest to związane z przeglądarką. Zdarza się również lokalnie i podczas produkcji.

Dzięki!

Answer 1

Wygląda na to, że przeglądarki nie wysyłają nagłówka źródłowego w nagłówkach żądań. A aws wymaga wysłania pochodzenia. Nie jestem pewien, dlaczego tak się stało. Nagłówek początkowy powinien zostać wysłany nawet przy prostym żądaniu HTTP. Niestety, tak nie jest.

I here jest powodem, dla którego głowica początkowa nie została wysłana.