AWS Cors Issue - Node.js

Question

当使用CORS标头请求存储在AWS S3(简单存储)上的图像时,我目前遇到了问题.我在AWS控制台上设置了CORS配置 - 设置如下:

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

但是,我在申请这些我存储的图像时得到的响应有点遍及整个地方并且非常间歇性.有时图像会返回,并且需要标题,有时则不会.我真的不确定为什么会这样.当我尝试在页面上将Access-Control-Allow-Origin标头设置为*时对图像进行多个请求时,效果似乎也会恶化(例如,如果我需要使用交叉原点标题检索10个图像).

这些是我需要的标题:

Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3000

我真的不确定我做错了什么.我确保每个图片标签都添加了crossOrigin ="anonymous"属性,但同样没有运气.

我需要这些图像跨原点工作的原因是因为我安装了一个角度插件,允许用户裁剪图像并将图像的裁剪版本存储为base64字符串.但是,尝试检索它们时出现以下错误.

这些是正确返回的图像的标题:

Request URL:https://trajansmarket.s3.amazonaws.com/be5bbda0-b04a-11e5-81d3-dd7ff3efeebc.jpg
Request Method:GET
Status Code:304 Not Modified
Remote Address:54.231.252.131:443

Response Headers
view source
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3000
Cache-Control:public, max-age=31536000
Date:Tue, 12 Jan 2016 21:13:03 GMT
ETag:"77bdbe9b517acc8cba86024c592bce3f"
Last-Modified:Fri, 01 Jan 2016 05:46:21 GMT
Server:AmazonS3
Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-id-2:F3OQpOHsAqySk9LNwwoJXVATVIByr4Gtvz953ZoL7DdB/dtE9nYwo99R59Rj6RzZc3dcHyk6wWY=
x-amz-request-id:CD220FF1F6EE6CA9

Request Headers
view source
Accept:image/webp,image/*,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6,ms;q=0.4
Connection:keep-alive
Host:trajansmarket.s3.amazonaws.com
If-None-Match:"77bdbe9b517acc8cba86024c592bce3f"
Origin:http://91.121.220.161:3000
Referer:http://91.121.220.161:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

而这里没有标题:

Request URL:https://trajansmarket.s3.amazonaws.com/c0671e00-b04a-11e5-81d3-
dd7ff3efeebc.jpg
Request Method:GET
Status Code:200 OK (from cache)
Remote Address:54.231.252.135:443

Response Headers
Accept-Ranges:bytes
Cache-Control:public, max-age=31536000
Content-Length:142102
Content-Type:application/octet-stream
Date:Tue, 12 Jan 2016 00:35:36 GMT
ETag:"beb93f56e3a2a65b983addd8af35c26c"
Last-Modified:Fri, 01 Jan 2016 05:46:25 GMT
Server:AmazonS3
x-amz-id-2:5XvaOd8bxMr5zwK317DfDMbk2+kzu3Zd7rsf2xl0hxwI40Oc4KDnQpgzD3sgtCRm9SXGqa93Mh0=
x-amz-request-id:FD3EB1978C38013B

Request Headers
Provisional headers are shown
Accept:image/webp,image/*,*/*;q=0.8
Origin:http://91.121.220.161:3000
Referer:http://91.121.220.161:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id:498F45FE-5D49-4AE0-AF58-F81B9AFD48AF

我只是想知道是否有人会知道为什么会发生这种情况.任何帮助将不胜感激.

Answer 1

这是非常令人沮丧的，我仍然没有弄清楚 AWS S3 间歇性返回 CORS 所需的标头的原因。

此后我想到了一种解决方法，即从亚马逊“下载”并将我需要的图像存储在本地文件夹中 - 允许用户“裁剪”图像并存储它，然后从本地文件夹中删除这些图像。

为了将图像文件流式传输到本地文件夹，我在 s3 的 .getObject 方法上使用了 fs.createWriteStream 方法。可以在以下位置找到此示例：在此处输入链接描述

这消除了我实际请求带有 CORS 标头的图像的需要，因为当它们存储在本地时，不再需要标头。然后我可以保存由cropper指令生成的base64并将其轻松存储在亚马逊S3上。

如果用户在裁剪本地图像之前导航离开，我会将它们从本地文件夹中删除，这样它就不会被堵塞。

我希望这对那些也遇到 CORS 标头问题的人有所帮助 - 尽管这只是一种解决方法。