CORS პოლიტიკა AJAX მოთხოვნებში JavaScript-ში

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';
	}
}