इस कोडलैब में देखें कि संसाधनों को फ़ेच करते समय, एक ही ऑरिजिन कैसे काम करता है.
सेट अप करें: एक ही ऑरिजिन से फे़च पेज
डेमो https://same-origin-policy-fetch.glitch.me पर होस्ट किया गया है.
यह आसान वेब पेज, https://same-origin-policy-fetch.glitch.me/fetch.html से संसाधन लोड करने के लिए fetch का इस्तेमाल करता है. index.html और fetch.html का ऑरिजिन एक ही है. इसलिए, आपको लाइव झलक में 200 दिखेगा.
1. किसी दूसरे ऑरिजिन से पेज फ़ेच करें
डेटा फ़ेच करने के लिए यूआरएल को https://www.google.com में बदलकर देखें.
लाइव झलक में आपको क्या दिखता है?
ब्राउज़र को फ़ेच करने के अनुरोध को ब्लॉक कर देना चाहिए, क्योंकि आपने रिसॉर्स के लिए किसी दूसरे ऑरिजिन से अनुरोध किया था. इसका मतलब है कि भले ही कोई हमलावर क्रॉस-ऑरिजिन रिसॉर्स को नहीं पढ़ सकता, भले ही उसने किसी उपयोगकर्ता के ब्राउज़र को कंट्रोल कर लिया हो.
2. क्रॉस-ऑरिजिन रिसॉर्स फ़ेच करना
डेटा फ़ेच करने के लिए यूआरएल को https://api.thecatapi.com/v1/images/search में बदलकर देखें.
लाइव झलक में आपको क्या दिखता है?
डेटा फ़ेच करने के लिए इस्तेमाल किया जाने वाला यूआरएल, किसी दूसरे ऑरिजिन से मेल खाता है. हालांकि, आपको स्टेटस कोड 200 दिखेगा. ऐसा क्यों है? मॉडर्न वेब ऐप्लिकेशन, अक्सर तीसरे पक्ष की स्क्रिप्ट को लोड करने या एपीआई एंडपॉइंट से क्वेरी करने के लिए, क्रॉस-ऑरिजिन रिसॉर्स का अनुरोध करते हैं. इस्तेमाल के इन उदाहरणों में बदलाव करने के लिए, सीओआरएस (क्रॉस ऑरिजिन रिसॉर्स शेयरिंग) नाम की एक प्रोसेस मौजूद है. इसकी मदद से, ब्राउज़र को यह बताया जाता है कि क्रॉस-ऑरिजिन रिसॉर्स लोड होने की अनुमति है. सीओआरएस के बारे में ज़्यादा जानने के लिए, क्रॉस-ऑरिजिन रिसॉर्स सुरक्षित तरीके से शेयर करें लेख पढ़ें.