通过JS加载图像的S3存储桶CORS错误

Question

我有一个带有公共文件的s3存储桶设置。这是此存储桶的CORS配置 -

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/938934/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

在我的html网页中，我试图从这个桶访问一个图像文件，我能够通过s3桶在我的网页上呈现图像 -

<img src="bucketurl/abcd"/>

但是，当我试图通过javascript加载该图像时，它不会加载并给出cors错误。 （这是第三方插件代码，不能绕过CORS.http://html2canvas.hertzen.com/） -

var imageLoadHandler = function imageLoadHandler(supportsDataImages) {
    return new Promise(function (resolve, reject) {
        var img = new Image();
        img.onload = function () {
            return resolve(img);
        };
        //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
        if (!supportsDataImages || useCORS) {
            img.crossOrigin = 'anonymous';
        }

        img.onerror = reject;
        img.src = src;
        if (img.complete === true) {
            // Inline XML images may fail to parse, throwing an Error later on
            setTimeout(function () {
                resolve(img);
            }, 500);
        }
        if (_this4.options.imageTimeout) {
            var timeout = _this4.options.imageTimeout;
            setTimeout(function () {
                return reject( true ? 'Timed out (' + timeout + 'ms) fetching ' + src.substring(0, 256) : '');
            }, timeout);
        }
    });
};

这是错误 -

Access to image at 'https://bucketurl/abcd' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我不想打开所有来源的资源。我只想打开s3bucket的资源。需要如何以及为此做出哪些改变。

Answer 1

您当前的CORS配置允许来自所有来源的GET，HEAD和POST请求。

但是，某些浏览器会发送预检请求1来验证服务器支持的HTTP请求。

预检请求是OPTIONS请求，这是使用特定标头执行的。您当前的配置仅包含允许授权标头的预检请求 这意味着发送预检请求的Google Chrome等浏览器会在此便笺上失败。

您应该将预检请求中发送的所有标头的条目包含在CORS配置中作为允许的标头。 2

我建议将CORSRule限制为你考虑过的起源。继续调整规则，直到你出现适合你的应用程序的限制性政策。 3

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/938934/">
<CORSRule>
    <AllowedOrigin>http://localhost:8080</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>/replace with another preflight header/</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>http://html2canvas.herzen.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>OPTIONS</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>/replace with another preflight header/</AllowedHeader>
</CORSRule>
</CORSConfiguration>

当您在浏览器的网络选项卡中检查预检请求时，可以查看预检请求的响应标头。

您还可以指定通配符以匹配预检请求中的所有标头。

    <AllowedHeader>*</AllowedHeader>