s3-amazon 图像 CORS 问题（仅在 5-8 小时后发生在少数浏览器中）

Posted 2023-03-04

【中文标题】s3-amazon 图像 CORS 问题（仅在 5-8 小时后发生在少数浏览器中）

【英文标题】：s3-amazon image CORS issue (Only happened in few browser after 5-8 hours)

【发布时间】：2019-03-07 19:10:53

【问题描述】：

目前，当我尝试从 s3 照片中获取 5-8 小时 前上传的图像时，我不知道为什么我一直遇到 CORS 错误。如果我从 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>

【参考方案1】：

问题不在于 S3 存储桶配置，而在于您如何渲染图像。

如果您打开您的图片link，您可以清楚地看到它可以访问。

您做错了什么是试图在 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">

【讨论】：

这个错误只发生在 Chrome 中。对于 IE/Safari 是可以的。以我为例。我只想在 html 上显示 base64 字符串。这个不能解决我的问题。

有什么问题？因为可以从 s3 存储桶访问图像，这意味着您当前的配置很好。

这个错误只发生在 Chrome/safari 中。同一台电脑，仍然在 IE 中工作。我不知道根本原因是什么，因为相同的 url 使用另一台带有 chorme 的电脑仍然可以工作。