Javascript AWS Cors问题-Node.js

我目前在请求存储在AWS S3（简单存储）上的带有CORS标头的图像时遇到问题。我已经在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>

我真的不确定我做错了什么。我已经确保每个图像标记也添加了crossOrigin=“anonymous”属性，但同样没有运气

我之所以需要这些图像跨原点工作，是因为我安装了一个angular插件，允许用户裁剪图像并将裁剪后的图像版本存储为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

---

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

我已经从许多不同的形式看到了这个问题： 一个是在S3中提供一个页面，该页面访问EC2或Elastic Beanstalk中的nodejs后端

在一个例子中，我使用的IE10浏览器抛出了错误，因为浏览器需要设置飞行前选项

在其他情况下，我在Elastic Beanstalk中使用Restify，在S3中使用Angular。我在请求中添加了Restify cors中间件包：

var corsMiddleWare = require('restify-cors-middleware'); //npm install this package
var cors = corsMiddleWare ({
    allowHeaders:['Authorization', 'API-Token', 'API-Token-Expiry']
 });
server.pre(cors.preflight);
server.use(cors.actual);
//rest of server definition

这似乎奏效了。 对于express，存在节点包express cors：

var cors = require('cors');
app.use(cors());

在这两种情况下，关键是所有请求都必须正确设置头，因此我们将它们添加到中间件中。（app/server.use）

---

你用的是香草节点吗？在这种情况下，您需要在向s3发出的每个请求上添加头

这是一个非常令人沮丧的问题，我还没有弄清楚AWS S3间歇性返回CORS所需标题的原因

此后，我想到了一种解决方法，即从amazon“下载”并将所需图像存储在本地文件夹中——允许用户“裁剪”图像并将其存储，然后再从本地文件夹中删除这些图像

为了将图像文件流式传输到本地文件夹，我在s3的.getObject方法上使用了fs.createWriteStream方法。这方面的一个例子可在以下网址找到：

这使得我不再需要实际请求带有CORS头的图像，因为当它们存储在本地时，不再需要头。然后，我可以保存由CROPER指令生成的base64，并轻松地将其存储在AmazonS3上

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

---

我希望这对那些也有CORS头问题的人有所帮助，尽管这只是一个解决办法。

这对我来说肯定是一个问题，因为它是一个缓存响应。它似乎丢失了缓存中的一些头。通过在图像名称中添加一个随机时间参数，我可以让它在100%的时间内正常工作，如下例所示

img = new Image();
img.src = "https://s3.amazonaws.com/bucket/img.png?t=" + (new Date().getTime() / 1000);    
img.crossOrigin = "Anonymous";

---

在浏览器开发者工具网络选项卡中，您是否可以确认收到所需的cors headersHi，这是间歇性的。有时我会收到带有标题的图像，但有时在刷新后我不会。因为某种原因，CORS规则在AWS中几乎无法正常工作。有什么想法吗？所以，你并不总是收到CORS标题-似乎是一个问题与AWSI的想法一样多。看起来我将不得不与他们的支持团队进行一次聊天，以尝试解决问题，这意味着我可能必须升级计划：（缓存的响应是否可以消除飞行前请求的需要，或者缓存的响应是否会丢失一些标头？

img = new Image();
img.src = "https://s3.amazonaws.com/bucket/img.png?t=" + (new Date().getTime() / 1000);    
img.crossOrigin = "Anonymous";