Cross-Domain Request এর সমস্যা এবং JSONP এর সমাধান

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং JSONP (Ajax এবং JSONP এর মাধ্যমে Cross-Domain Request) |

9

9

Cross-Domain Request এর সমস্যা

Cross-Domain Request হল ক্লায়েন্ট (ব্রাউজার) থেকে এমন একটি HTTP রিকোয়েস্ট যা একটি ভিন্ন ডোমেইনে পাঠানো হয়। উদাহরণস্বরূপ, যদি আপনার ওয়েব অ্যাপ্লিকেশন https://example.com থেকে https://api.anotherdomain.com এ রিকোয়েস্ট পাঠায়, তাহলে এটি একটি Cross-Domain Request।

Same-Origin Policy এর কারণে ব্রাউজার স্বয়ংক্রিয়ভাবে Cross-Domain রিকোয়েস্ট ব্লক করে। এটি ব্রাউজারের একটি সিকিউরিটি ফিচার যা ব্যবহারকারীদের তথ্য রক্ষা করে এবং সাইটগুলোকে একে অপরের ডেটাতে অবৈধভাবে অ্যাক্সেস করা থেকে বাধা দেয়।

Same-Origin Policy এর প্রধান পয়েন্টগুলো:

Origin: একটি ওয়েব পেজের origin নির্ধারণ করা হয় তার স্কিম (HTTP/HTTPS), হোস্ট (example.com), এবং পোর্ট (80/443) এর উপর ভিত্তি করে। যদি এই তিনটি মিল না খায়, তাহলে সেটি Cross-Domain বলে বিবেচিত হয়।
ক্লায়েন্ট সাইড ব্লক: JavaScript এর মাধ্যমে যদি অন্য কোনো ডোমেইনে Ajax রিকোয়েস্ট পাঠানো হয়, ব্রাউজার তা ব্লক করে দেয়।

Cross-Domain Request এর সমস্যা:

Access Denied: Ajax রিকোয়েস্ট অন্য ডোমেইনে পাঠালে ব্রাউজার "Access Denied" বা এরকম একটি ত্রুটি দেখায়।
Cross-Origin Resource Sharing (CORS) কনফিগারেশন প্রয়োজন: সার্ভারকে সঠিক CORS হেডার সেটআপ করতে হয় যাতে এটি Cross-Domain রিকোয়েস্ট গ্রহণ করতে পারে, যা সবসময় সহজ নয় বা সব সার্ভারে সাপোর্টেড নয়।

JSONP এর মাধ্যমে Cross-Domain Request এর সমাধান

JSONP (JavaScript Object Notation with Padding) একটি পুরোনো কিন্তু কার্যকরী পদ্ধতি যা Cross-Domain রিকোয়েস্টের সমস্যা সমাধান করে। এটি Same-Origin Policy কে বাইপাস করতে একটি সৃজনশীল উপায় ব্যবহার করে।

JSONP কীভাবে কাজ করে:

<script> ট্যাগ ব্যবহার করা: ব্রাউজারে <script> ট্যাগ ব্যবহার করে যেকোনো ডোমেইন থেকে জাভাস্ক্রিপ্ট লোড করা সম্ভব। এটি Same-Origin Policy এর আওতায় পড়ে না।
Callback Function: ক্লায়েন্ট সাইডে একটি callback function তৈরি করা হয়, যা সার্ভার থেকে প্রাপ্ত ডেটা প্রসেস করে।
Server Response as JavaScript Function: সার্ভার সেই callback function এর নামসহ JSON ডেটা রিটার্ন করে, যা জাভাস্ক্রিপ্ট কোড হিসেবে এক্সিকিউট হয়।

JSONP উদাহরণ:

১. ক্লায়েন্ট সাইড কোড (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Example</title>
</head>
<body>
    <h1>JSONP Example</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- ডেটা এখানে দেখানো হবে -->
    </div>

    <script>
        // Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
        function handleResponse(data) {
            var container = document.getElementById('data-container');
            container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
        }

        // JSONP রিকোয়েস্ট পাঠানোর ফাংশন
        function fetchData() {
            var script = document.createElement('script');
            script.src = 'https://api.externaldomain.com/getData?callback=handleResponse';
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

২. সার্ভার সাইড রেসপন্স (JSONP রেসপন্স):

handleResponse({
    "name": "John Doe",
    "age": 30
});

ব্যাখ্যা:

Callback Function: ক্লায়েন্ট সাইডে handleResponse নামের একটি ফাংশন তৈরি করা হয়েছে, যা সার্ভার থেকে প্রাপ্ত ডেটা প্রসেস করে।
Script Tag Creation: fetchData() ফাংশন একটি <script> ট্যাগ তৈরি করে এবং সেটি ব্রাউজারে যোগ করে, যাতে ব্রাউজার সার্ভার থেকে জাভাস্ক্রিপ্ট কোড লোড করে।
Server Response: সার্ভার থেকে রেসপন্স সরাসরি একটি জাভাস্ক্রিপ্ট ফাংশন কল হিসেবে আসে, যাতে ডেটা ক্লায়েন্ট সাইডে প্রসেস করা যায়।

JSONP এর বিকল্প: CORS (Cross-Origin Resource Sharing)

বর্তমানে JSONP এর বদলে CORS বেশি ব্যবহৃত হয়, কারণ এটি নিরাপত্তা এবং সিকিউরিটি মেনে Cross-Domain রিকোয়েস্ট করতে সক্ষম। CORS এর মাধ্যমে সার্ভার হেডারে উপযুক্ত কনফিগারেশন করে Cross-Domain রিকোয়েস্ট অনুমতি দেওয়া হয়। এটি JSONP এর ঝুঁকিগুলো এড়িয়ে Ajax এর মাধ্যমে Cross-Domain রিকোয়েস্টের অনুমতি দেয়।

Mark as Completed

Content added By

Md. Nasir Uddin (Raju)

Read more

Cross-Domain Request এর সমস্যা এবং JSONP এর সমাধান

or

Email, Mobile or Username:

Password:

Remember Me

Forgot password?

Don't have an account? Register