कैनवास तत्व और छवि CORS का उपयोग करना पहले दो भार

Question

काम नहीं करता है एडब्ल्यूएस S3 से लोड

तो मैं अपने एडब्ल्यूएस S3 बाल्टी पर CORS सेटअप:

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

मेरी एचटीएमएल में

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

में मेरी जावास्क्रिप्ट मैं एक छवि लोड कर रहा हूं और इसे कैनवास छवि में रख रहा हूं।

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

मैं इस तरह के संदर्भ को इंटरनेट एक्सप्लोरर के साथ संगत होने के लिए लोड कर रहा हूं।

यहां मेरी समस्या है।

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

हालांकि, जब मैं पेज दो बार फिर से लोड, यह अंततः काम करते हैं और छवि को लोड होगा: पेज पहले दो बार लोड करता है, यह इस त्रुटि के साथ आता है। एक बार यह हो जाने के बाद, मैं कैनवास तत्व पर सफलतापूर्वक DataURL() को कॉल करने में सक्षम हूं।

क्या कोई जानता है कि ऐसा क्यों होता है? मुझसे कोई गलती हुई है? क्या यह एडब्ल्यूएस के साथ एक मुद्दा है और मुझे अमेज़ॅन के लिए कॉर्स को ठीक करने की प्रतीक्षा करनी होगी?

यह मेरे द्वारा परीक्षण किए गए सभी ब्राउज़रों में हो रहा है। क्रोम, फ़ायरफ़ॉक्स, सफारी, आईई में। मेरे मैक, पीसी और आईफोन पर। तो मुझे नहीं लगता कि यह ब्राउज़र से संबंधित है। इसके अलावा, यह स्थानीय रूप से और उत्पादन में होता है।

धन्यवाद!

Answer 1

स्पष्ट रूप से ब्राउज़र अनुरोध हेडर में मूल शीर्षलेख नहीं भेज रहे हैं। और aws मूल भेजने के लिए आवश्यक है। मुझे यकीन नहीं है कि यह मामला क्यों होगा। मूल शीर्षलेख को एक साधारण HTTP अनुरोध के साथ भी भेजा जाना चाहिए। हां, यह नहीं है।

और here यही कारण है कि मूल सिर नहीं भेजा जा रहा था।