JavaScript-da AJAX so'rovlarida CORS siyosati

AJAX orqali boshqa saytlarga so'rov yuborish (cross-origin requests) oddiygina amalga oshirilmaydi. Bunday so'rovlar CORS siyosati bilan tartibga solinadi. Qisqasi, ushbu siyosatga ko'ra, siz so'rov yuborayotgan sayt unga javob berishga rozilik bildirishi kerak. Buning uchun u mos HTTP sarlavhalarini qaytarishi kerak.

Keling, amalda sinab ko'raylik. Ikkita test serverini turli portlarda ishga tushiramiz. Birinchisi 3001-portda, ikkinchisi esa 3002-portda. Keling, ikkinchi saytdan birinchisiga AJAX so'rov yuborishga harakat qilaylik.

Birinchi sayt quyidagi so'rovlarni qabul qilishga tayyor bo'lsin:

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

Keling, ikkinchi saytdan birinchi saytga so'rov yuboraylik:

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

Natijada so'rov bajarilmaydi, brauzer konsolida esa CORS siyosati bilan bog'liq xatolikni ko'ramiz.

So'rov bajarilishi uchun birinchi server maxsus HTTP sarlavhalarini qaytarishi kerak. Keling ularni ko'rsatamiz - va ikkinchi saytdan birinchi saytga so'rov o'ta boshlaydi:

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