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 сиёсати билан боглик хатоликни кўрамиз.

Сўров бажарилиши учун биринчи сервер maxsus HTTP сарлавҳаларни жўнатиши керак. Келик уларни кўрсатайлик - ва иккинчи сайтдан биринчи сайтга бўлган сўров ўта бошлайди:

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