এই কোডল্যাবে, রিসোর্স ফেচ করার সময় একই-অরিজিন কীভাবে কাজ করে তা দেখুন।
সেট-আপ: একই অরিজিন থেকে পৃষ্ঠা ফেচ করুন
ডেমোটি https://same-origin-policy-fetch.glitch.me-এ হোস্ট করা হয়েছে।
এই সাধারণ ওয়েব পেজ https://same-origin-policy-fetch.glitch.me/fetch.html থেকে রিসোর্স লোড করতে fetch ব্যবহার করে। যেহেতু index.html এবং fetch.html একই উৎস শেয়ার করে, তাই আপনার লাইভ প্রিভিউতে 200 দেখতে পাওয়া উচিত।
১. অন্য অরিজিন থেকে পৃষ্ঠা ফেচ করুন
ফেচ URL পরিবর্তন করে https://www.google.com করার চেষ্টা করুন।
লাইভ প্রিভিউতে আপনি কী দেখতে পাচ্ছেন?
ব্রাউজারের ফেচ অনুরোধ ব্লক করা উচিত ছিল কারণ আপনি অন্য অরিজিন থেকে রিসোর্সের জন্য অনুরোধ করেছেন। এর অর্থ হল, কোনও অ্যাটাকার ব্যবহারকারীর ব্রাউজার কন্ট্রোল করলেও ক্রস-অরিজিন রিসোর্স পড়তে পারবে না।
২. ক্রস-অরিজিন রিসোর্স ফেচ করুন
ফেচ URL পরিবর্তন করে https://api.thecatapi.com/v1/images/search করে দেখুন।
লাইভ প্রিভিউতে আপনি কী দেখতে পাচ্ছেন?
ফেচ URL-এর উৎস আলাদা, তবে আপনাকে স্ট্যাটাস কোড ২০০ দেখতে হবে। কেন? আধুনিক ওয়েব অ্যাপ্লিকেশন প্রায়শই থার্ড-পার্টি স্ক্রিপ্ট লোড করতে বা API এন্ডপয়েন্ট কোয়েরি করতে ক্রস-অরিজিন রিসোর্সের অনুরোধ করে। এইসব ব্যবহারের ক্ষেত্রে, CORS (ক্রস অরিজিন রিসোর্স শেয়ারিং) নামক একটি মেকানিজম আছে যা ব্রাউজারকে জানায় যে ক্রস-অরিজিন রিসোর্স লোড করার অনুমতি আছে। CORS সম্পর্কে আরও জানতে নিরাপদে ক্রস-অরিজিন রিসোর্স শেয়ার করুন নিবন্ধটি দেখুন।