জাভাস্ক্রিপ্টে AJAX রিকোয়েস্টে CORS নীতি

AJAX এর মাধ্যমে অন্য সাইটে রিকোয়েস্ট পাঠানো (cross-origin requests) এত সহজ নয়। এই ধরনের রিকোয়েস্ট CORS নীতি দ্বারা নিয়ন্ত্রিত হয়। সংক্ষেপে, এই নীতি অনুযায়ী, আপনি যে সাইটে রিকোয়েস্ট পাঠাচ্ছেন, তাকে সেই রিকোয়েস্টের উত্তর দিতে সম্মত হতে হবে। এর জন্য সাইটটিকে সংশ্লিষ্ট HTTP হেডার পাঠাতে হবে।

চলুন অনুশীলনে চেষ্টা করি। দুইটি টেস্ট সার্ভার বিভিন্ন পোর্টে চালু করি। প্রথমটি 3001 পোর্টে, এবং দ্বিতীয়টি 3002 পোর্টে। চলুন দ্বিতীয় সাইট থেকে প্রথম সাইটে একটি AJAX রিকোয়েস্ট পাঠানোর চেষ্টা করি।

ধরুন প্রথম সাইটটি নিম্নলিখিত রিকোয়েস্ট গ্রহণের জন্য প্রস্তুত:

export default {
	'/handler/': function({ body }) {
		console.log(body);
		return 'success';
	}
}

দ্বিতীয় সাইট থেকে প্রথম সাইটে একটি রিকোয়েস্ট পাঠাই:

button.addEventListener('click', function() {
	let promise = fetch('http://localhost:3001/handler/', {
		method: 'post',
		body: JSON.stringify([1, 2, 3, 4, 5]),
		headers: {
			'Content-Type': 'application/json',
		},
	});
});

ফলস্বরূপ, রিকোয়েস্টটি কার্যকর হবে না, এবং ব্রাউজার কনসোলে আমরা CORS নীতির সাথে সম্পর্কিত একটি ত্রুটি দেখতে পাব।

রিকোয়েস্টটি সফলভাবে সম্পন্ন হওয়ার জন্য, প্রথম সার্ভারটিকে বিশেষ HTTP হেডার পাঠাতে হবে। চলুন সেগুলো নির্দিষ্ট করি - তাহলে দ্বিতীয় সাইট থেকে প্রথম সাইটে রিকোয়েস্ট পাঠানো কাজ করবে:

export default {
	'/handler/': function({ body, resp }) {
		resp.setHeader('Access-Control-Allow-Origin', '*');
		resp.setHeader('Access-Control-Allow-Headers', '*');
		
		console.log(body);
		return 'success';
	}
}