Politika CORS v AJAX požiadavkách v JavaScripte

Prostredníctvom AJAX nie je možné jednoducho vykonávať požiadavky na iné stránky (cross-origin requests). Takéto požiadavky sú regulované politikou CORS. Stručne povedané, podľa tejto politiky stránka, na ktorú posielate požiadavku, musí súhlasiť s jej vykonaním. Preto musí vrátiť príslušné HTTP hlavičky.

Vyskúšajme si to v praxi. Spustíme dva testovacie servery na rôznych portoch. Prvý na 3001 a druhý na 3002. Skúsme odoslať AJAX požiadavku z druhej stránky na prvú.

Nech prvá stránka je pripravená prijímať nasledujúce požiadavky:

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

Pošleme z druhej stránky požiadavku na prvú:

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

V dôsledku toho sa požiadavka nevykoná a v konzole prehliadača uvidíme chybu spojenú s politikou CORS.

Aby sa požiadavka vykonala, prvý server musí vrátiť špeciálne HTTP hlavičky. Zadajme ich - a požiadavka z druhej stránky začne prechádzať na prvú:

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