JavaScript හි AJAX ඉල්ලීම්වල CORS ප්රතිපත්තිය

AJAX හරහා වෙනත් වෙබ් අඩවිවලට (cross-origin requests) ඉල්ලීම් කිරීමට නිරවුල්ව අවසර නැත. එවැනි ඉල්ලීම් පාලනය වන්නේ CORS ප්‍රතිපත්තිය මගිනි. කෙටියෙන් කිවහොත්, මෙම ප්‍රතිපත්තියට අනුව ඔබ ඉල්ලීම යවන වෙබ් අඩවිය, එයට පිළිතුරු දීමට එකඟ විය යුතුය. ඒ සඳහා එය අදාළ HTTP ශීර්ෂක (headers) ලබා දිය යුතුය.

යථාර්ථයේ දී අපි උත්සාහ කරමු. විවිධ වරායන් (ports) වලින් පරීක්ෂණ සේවාදායක (servers) දෙකක් ආරම්භ කරමු. පළමුවැන්න 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',
		},
	});
});

ප්‍රතිඵලයක් වශයෙන් ඉල්ලීම සාර්ථක නොවන අතර, බ්‍රව්සර් කොන්සෝලයේ (console) අපට CORS ප්‍රතිපත්තිය සම්බන්ධ දෝෂයක් දකිනු ඇත.

ඉල්ලීම සාර්ථක වීමට, පළමු සේවාදායකය (server) විශේෂ HTTP ශීර්ෂක (headers) ලබා දිය යුතුය. අපි ඒවා නියම කරමු - එවිට දෙවන වෙබ් අඩවියෙන් පළමු වෙබ් අඩවියට යවන ඉල්ලීම සාර්ථක වීමට පටන් ගනී:

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