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，並將其存儲在amazon S3上。

如果用戶在裁剪本地圖像之前導航，我會從本地文件夾中刪除它們，這樣它就不會被堵塞。

我希望這對那些也遇到CORS標題問題的人有所幫助 - 盡管這只是一種解決方法。

Answer 2

我已經以多種不同的形式看到了這個問題：一個是你在S3中為一個頁面提供服務，在EC2或Elastic Beanstalk中訪問nodejs后端。

在一個案例中，我使用IE10的瀏覽器會拋出錯誤，因為瀏覽器需要設置Preflight選項。

在其他情況下，我在S3中使用Elastic Beanstalk和Angular中的Restify。 我在請求中添加了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-cors：

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

在任何一種情況下，關鍵是所有請求必須正確設置標頭，因此我們將它們添加到中間件。 （app / server.use） 使用restify時如何支持cors

你在使用香草節點嗎？ 在這種情況下，您需要在對s3發出的每個請求中添加標頭。

Answer 3

這絕對是一個問題，它對我來說是一個緩存的回應。 它似乎丟失了緩存中的一些標頭。 通過在圖像名稱后附加一個隨機時間參數，我可以100％的時間讓它工作，如下例所示。

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