इस कोडलैब में देखें कि संसाधनों को फ़ेच करते समय, एक ही ऑरिजिन कैसे काम करता है.
सेट अप करना: एक ही ऑरिजिन से पेज फ़ेच करना
डेमो को 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 दिखना चाहिए. क्यों? मॉडर्न वेब ऐप्लिकेशन, तीसरे पक्ष की स्क्रिप्ट लोड करने या एपीआई एंडपॉइंट की क्वेरी करने के लिए, अक्सर क्रॉस-ऑरिजिन रिसॉर्स का अनुरोध करते हैं. इन इस्तेमाल के उदाहरणों को ध्यान में रखते हुए, ब्राउज़र को यह बताने के लिए सीओआरएस (क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग) नाम का एक तरीका है कि क्रॉस-ऑरिजिन रिसॉर्स को लोड करने की अनुमति है. सीओआरएस के बारे में ज़्यादा जानने के लिए, क्रॉस-ऑरिजिन रिसॉर्स को सुरक्षित तरीके से शेयर करना लेख पढ़ें.