Изображение CORS s3-amazon image (возникало только в нескольких браузерах через 5-8 часов)

Question

В настоящее время я не знаю, почему я продолжаю нажимать на ошибку CORS, когда я пытался получить изображение, которое я загрузил 5-8 часов назад из фотографий s3.Все еще хорошо, если я получу его от 5-8 часов!? Вот мой конфиг для s3 aws:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>`

Вот код JavaScript, который я пытаюсь получить изображение:

function getData(link){
	var image = new Image();
// 	image.crossOrigin = 'use-credentials';
	image.crossOrigin = 'anonymous';
	// create an empty canvas element
	var canvas = document.createElement("canvas"),
			canvasContext = canvas.getContext("2d");
	image.onload = function () {
		//Set canvas size is same as the picture
		canvas.width = image.width;
		canvas.height = image.height;
		// draw image into canvas element
		canvasContext.drawImage(image, 0, 0, image.width, image.height);
		// get canvas contents as a data URL (returns png format by default)
		var dataURL = canvas.toDataURL();
    document.getElementById("test").innerHTML = dataURL;
	};
	image.src = link;
}

getData("https://whammybar.s3.ap-southeast-1.amazonaws.com/duy-gmail-com/productImage/20181001/11bba32c-b276-47f4-b1fa-e87b53136bcc.jpg")

<span id="test"></span>

Answer 1

Проблема не в конфигурации S3 Bucket, а в том, как вы рендеринг изображения.

Если вы откроете ваше изображение ссылка , вы четко увидите, что оно доступно.

То, что вы делаете неправильно, пытается отобразить изображение в элементе span, поэтому в вашем примере он отображает данные изображения в виде строки base64.

Просто измените элемент span наЭлемент img затем установите img.src на dataUrl

function getData(link){
	var image = new Image();
// 	image.crossOrigin = 'use-credentials';
	image.crossOrigin = 'anonymous';
	// create an empty canvas element
	var canvas = document.createElement("canvas"),
			canvasContext = canvas.getContext("2d");
	image.onload = function () {
		//Set canvas size is same as the picture
		canvas.width = image.width;
		canvas.height = image.height;
		// draw image into canvas element
		canvasContext.drawImage(image, 0, 0, image.width, image.height);
		// get canvas contents as a data URL (returns png format by default)
		var dataURL = canvas.toDataURL();
    document.getElementById("test").src = dataURL;
	};
	image.src = link;
}

getData("https://whammybar.s3.ap-southeast-1.amazonaws.com/duy-gmail-com/productImage/20181001/11bba32c-b276-47f4-b1fa-e87b53136bcc.jpg")

<img id="test">