AJAX сурамдардагы CORS саясаты 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';
	}
}