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