अपारदर्शी प्रतिक्रियाओं पर क्या सीमाएं लागू होती हैं?


86

ओपेक प्रतिक्रियाओं को फ़ॉच एपीआई के हिस्से के रूप में परिभाषित किया गया है , और जब कोर सक्षम नहीं होता है, तो एक दूरस्थ मूल से किए गए अनुरोध के परिणाम का प्रतिनिधित्व करते हैं ।

क्या व्यावहारिक सीमाएँ और "गोचैस" मौजूद हैं जो कि किसी पृष्ठ पर जावास्क्रिप्ट और संसाधन के रूप में दोनों से अपारदर्शी प्रतिक्रियाओं का उपयोग कैसे किया जा सकता है?

जवाबों:


125

अपारदर्शी प्रतिक्रियाओं 'हेडर्स / बॉडी तक पहुंच

अपारदर्शी प्रतिक्रियाओं के आसपास सबसे सरल सीमा यह है कि आप में से अधिकांश से सार्थक जानकारी वापस नहीं मिल सकता है गुण का Responseवर्ग, जैसे headers, या विभिन्न फोन तरीकों कि श्रृंगार Bodyइंटरफेस, जैसे json()या text()। यह एक अपारदर्शी प्रतिक्रिया की ब्लैक-बॉक्स प्रकृति के साथ है।

पृष्ठ पर संसाधन के रूप में अपारदर्शी प्रतिक्रियाओं का उपयोग करना

जब भी ब्राउज़र एक गैर- CORS क्रॉस-ऑरिजनल संसाधन का उपयोग करने की अनुमति देता है, तो वेब पेज पर अपारदर्शी प्रतिक्रियाओं को एक संसाधन के रूप में उपयोग किया जा सकता है। यहां उन तत्वों का एक उपसमूह है, जिसके लिए गैर-कोर क्रॉस-ऑरिजनल रिसोर्सेज और इसके बाद अपारदर्शी प्रतिक्रियाएं मान्य हैं, जिन्हें मोज़िला डेवलपर नेटवर्क प्रलेखन से अनुकूलित किया गया है :

  • <script>
  • <link rel="stylesheet">
  • <img>, <video>और<audio>
  • <object> तथा <embed>
  • <iframe>

एक उल्लेखनीय उपयोग मामला जिसके लिए अपारदर्शी प्रतिक्रियाएं मान्य नहीं हैं , फ़ॉन्ट संसाधनों के लिए है

सामान्य तौर पर, यह निर्धारित करने के लिए कि आप किसी पृष्ठ पर एक विशेष प्रकार के संसाधन के रूप में एक अपारदर्शी प्रतिक्रिया का उपयोग कर सकते हैं या नहीं, संबंधित विनिर्देश की जांच करें। उदाहरण के लिए, एचटीएमएल विनिर्देश बताता है कि गैर-कॉर्स क्रॉस-ऑरिजिन (यानी अपारदर्शी) प्रतिक्रियाओं का उपयोग <script>तत्वों के लिए किया जा सकता है , हालांकि लीक जानकारी को रोकने के लिए कुछ सीमाओं के साथ।

अपारदर्शी प्रतिक्रियाएँ और कैश संग्रहण एपीआई

एक "गोचा" जो डेवलपर अपारदर्शी प्रतिक्रियाओं के साथ चला सकता है , में कैशे स्टोरेज एपीआई के साथ उनका उपयोग करना शामिल है । पृष्ठभूमि की जानकारी के दो टुकड़े प्रासंगिक हैं:

  • statusएक अपारदर्शी प्रतिक्रिया की संपत्ति हमेशा निर्धारित होती है0 , चाहे मूल अनुरोध सफल हो या विफल।
  • यदि कैश अनुरोध API add()/ addAll()विधियों दोनों को अस्वीकार कर देगा यदि किसी भी अनुरोध के परिणामस्वरूप प्रतिक्रियाओं का एक स्थिति कोड है जो 2XX रेंज में नहीं है ।

उन दो बिंदुओं से, यह निम्नानुसार है कि यदि एक अपारदर्शी प्रतिक्रिया में add()/ addAll()कॉल के परिणाम के रूप में किए गए अनुरोध को कैश में जोड़ा जा सकता है।

आप स्पष्ट रूप से प्रदर्शन करके fetch()और फिर put()अपारदर्शी प्रतिक्रिया के साथ विधि को बुलाकर इसके चारों ओर काम कर सकते हैं । ऐसा करने से, आप प्रभावी रूप से इस जोखिम का विरोध कर रहे हैं कि आपके द्वारा कैशिंग की गई प्रतिक्रिया आपके सर्वर द्वारा दी गई त्रुटि हो सकती है।

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

अपारदर्शी प्रतिक्रियाएँ और नेविगेटर.स्टोरेज एपीआई

क्रॉस-डोमेन जानकारी के रिसाव से बचने के लिए, स्टोरेज कोटा सीमा की गणना के लिए उपयोग की जाने वाली एक अपारदर्शी प्रतिक्रिया के आकार में महत्वपूर्ण पैडिंग को जोड़ा गया है (जैसे कि एक QuotaExceededअपवाद फेंक दिया गया है) और navigator.storageएपीआई द्वारा रिपोर्ट किया गया है

इस पेडिंग का विवरण ब्राउज़र से ब्राउज़र में भिन्न होता है, लेकिन Google Chrome के लिए, इसका अर्थ है कि किसी भी एकल कैश्ड अपारदर्शी प्रतिक्रिया का कुल भंडारण उपयोग में न्यूनतम आकार लगभग 7 मेगाबाइट है । आपको यह ध्यान में रखना चाहिए कि यह निर्धारित करने के लिए कि आप कितनी अपारदर्शी प्रतिक्रियाओं को कैश करना चाहते हैं, क्योंकि आप आसानी से भंडारण कोटा सीमाओं को पार कर सकते हैं, जितनी जल्दी आप अन्यथा अपारदर्शी संसाधनों के वास्तविक आकार के आधार पर अपेक्षा करते हैं।


1
यह वास्तव में डिवाइस के भौतिक भंडारण पर अंतरिक्ष की मात्रा को नहीं लेता है। यह केवल मूल्य है जो कोटा गणना में योगदान देता है।
जेफ पोस्निक

1
आपका जवाब यहां दिए गए वर्कबॉक्स गाइड में भी बताया गया है: Developers.google.com/web/tools/workbox/guides/…
Dima Slivin

14
यह सच है, लेकिन मैंने लिखा है कि वर्कबॉक्स गाइड :-)
जेफ पॉज़निक

1
क्या इस तरह के कैश के साथ संयोजन में एक छवि सीडीएन का उपयोग करना एक बुरा डिजाइन है? (आवंटित स्थान को बर्बाद करना) क्या हमारे मुख्य डोमेन से प्राप्त फ़ाइल को कैश करना और सीडीएन लिंक (कुंजी) के साथ इसे उजागर करना संभव है? उदाहरण के लिए मेरे पास नेटवर्क अनुरोध हो सकता है cdn.x.com/test.jpgऔर कैश अनुरोध मुख्य डोमेन पर जा सकते हैं www.x.com/test.jpg
cglacet 16

1
मुझे इस समस्या के चारों ओर एक मुश्किल मिला, मुझे पता नहीं है कि यह एक अच्छा समाधान है लेकिन मैं मूल रूप से अपने सेवा कार्यकर्ता को यह दिखावा करता हूं कि यह सीडीएन है। मैं कैश में डोमेन सापेक्ष URL जोड़ता हूं (उदाहरण के /test.jpgलिए , तब प्रत्येक cdn.x.com/test.jpgमूल अनुरोध के लिए मैं URL को मूल डोमेन (URL बन जाता है www.x.com/test.jpg) के साथ संशोधित करता हूं, मैं कुछ इस तरह का उपयोग करता हूं: const cacheUrl = (url.hostname == 'cdn.x.com')? new URL(event.target.location.origin + url.pathname): url;मैं तब इस नए यूआरएल के साथ कैश का अनुरोध करता हूं caches.match(cacheUrl), ऐसा लगता है। ठीक काम करने के लिए। हालांकि इस दृष्टिकोण पर कोई भी?
cglacet
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.