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