JavaScript-тегі 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';
	}
}