Политика 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';
	}
}