एडब्ल्यूएस कॉर्स इश्यू - नोड.जेएस

Question

मैं वर्तमान में सीओआरएस हेडर के साथ एडब्ल्यूएस एस 3 (सरल स्टोरेज) पर संग्रहीत छवियों का अनुरोध करते समय एक समस्या का सामना कर रहा हूं। मैं एडब्ल्यूएस कंसोल पर CORS configuaration की स्थापना की है - और सेटअप इस प्रकार है के रूप में:

<?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-Methods:GET 
Access-Control-Allow-Origin:* 
Access-Control-Max-Age:3000 

मैं सच में यकीन है कि मैं गलत तरीके से क्या कर रहा नहीं कर रहा हूँ:

इन हेडर है कि मैं जरूरत है। मैंने यह सुनिश्चित कर लिया है कि प्रत्येक छवि टैग में crossOrigin = "अज्ञात" विशेषता भी शामिल है, लेकिन फिर, कोई भाग्य नहीं है।

क्रॉस उत्पत्ति के लिए इन छवियों की आवश्यकता होने का कारण यह है कि मैंने एक कोणीय प्लगइन स्थापित किया है जो उपयोगकर्ता को छवियों को फसल करने और छवियों के फसल संस्करणों को बेस 64 स्ट्रिंग के रूप में स्टोर करने की अनुमति देता है। हालांकि, उन्हें पुनः प्राप्त करने का प्रयास करते समय मुझे निम्न त्रुटि मिलती है। हेडर के बिना

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

यह बहुत निराशाजनक था और मुझे अभी भी एडब्ल्यूएस एस 3 के कारणों का काम करने के लिए अभी भी काम नहीं करना है, जो मुझे सीओआरएस की जरूरत है।

मैंने तब से एक ऐसे कामकाज के बारे में सोचा है जो 'डाउनलोड' करना है और मुझे स्थानीय फ़ोल्डर में अमेज़ॅन से आवश्यक छवियों को स्टोर करना है - उपयोगकर्ता को छवियों को 'फसल' करने दें और इन छवियों को हटाने से पहले इसे स्टोर करें स्थानीय फोल्डर।

छवि फ़ाइलों को स्थानीय फ़ोल्डर में स्ट्रीम करने के लिए मैंने s3 से .getObject विधि पर fs.createWriteStream विधि का उपयोग किया। इसका एक उदाहरण यहां पाया जा सकता है: enter link description here

इसने मुझे कोरर्स हेडर के साथ छवियों का वास्तव में अनुरोध करने की ज़रूरत को दूर कर लिया है जब वे स्थानीय रूप से संग्रहीत होते हैं, हेडर की आवश्यकता नहीं होती है। मैं फिर अपने क्रॉस्पर निर्देश द्वारा उत्पन्न बेस 64 को बचा सकता हूं और इसे आसानी से अमेज़ॅन एस 3 पर संग्रहीत कर सकता हूं।

यदि उपयोगकर्ता स्थानीय छवियों को फसल करने से पहले नेविगेट करता है तो मैं उन्हें स्थानीय फ़ोल्डर से हटा देता हूं ताकि यह छेड़छाड़ न हो।

मुझे उम्मीद है कि यह उन लोगों के लिए कुछ मददगार है जो सीओआरएस हेडर के साथ भी समस्याएं हैं - भले ही यह सिर्फ एक कामकाज है।

Answer 2

वैसे मैंने इस समस्या को कई अलग-अलग रूपों में देखा है: एक ऐसा स्थान है जहां आप एस 3 में एक पृष्ठ की सेवा कर रहे हैं जो ईसी 2 या लोचदार बीनस्टॉक में नोडजेस बैकएंड तक पहुंचता है।

एक मामले में यह ब्राउज़र था जो मैं IE10 का उपयोग कर रहा था जो त्रुटियों को फेंक देता था क्योंकि ब्राउजर को प्रीफलाइट विकल्प सेट करने की आवश्यकता होती थी।

अन्य मामलों में मैं एल 3 में लोचदार बीनस्टॉक और कोणीय में बहाली का उपयोग कर रहा था। मैंने अनुरोध पर Restify-cors midware पैकेज जोड़ा:

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 

यह काम करने लग रहा था। एक्सप्रेस के मामले में वहाँ है नोड पैकेज व्यक्त-CORS:

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

या तो मामले में महत्वपूर्ण है सभी अनुरोधों को हेडर ठीक से सेट होना आवश्यक है कि, इसलिए हम उन्हें मिडलवेयर में जोड़ें। (ऐप/server.use) How can I support cors when using restify

क्या आप वेनिला नोड का उपयोग कर रहे हैं? उस स्थिति में आपको एस 3 पर किए गए हर अनुरोध पर शीर्षलेख जोड़ना होगा।

Answer 3

यह निश्चित रूप से मेरे लिए एक कैश प्रतिक्रिया होने के साथ एक मुद्दा था। ऐसा लगता है कि कैश में कुछ शीर्षलेख खो देते हैं। मैं छवि के नाम पर एक यादृच्छिक समय पैरामीटर जोड़कर 100% समय पर काम करने में सक्षम था, जैसा कि नीचे दिए गए उदाहरण में है।

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