Politika CORS v AJAX požadavcích v JavaScriptu

Přes AJAX nelze jednoduše provádět požadavky na jiné weby (cross-origin requests). Takové požadavky jsou regulovány politikou CORS. Stručně řečeno, podle této politiky musí web, na který posíláte požadavek, souhlasit s jeho obsloužením. K tomu musí vrátit odpovídající HTTP hlavičky.

Pojďme to vyzkoušet v praxi. Spustíme dva testovací servery na různých portech. První na 3001, a druhý na 3002. Zkusme odeslat AJAX požadavek z druhého webu na první.

Nechť první web je připraven přijímat následující požadavky:

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

Pošleme z druhého webu požadavek na první:

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 se požadavek neprovede a v konzoli prohlížeče uvidíme chybu související s politikou CORS.

Aby se požadavek provedl, první server musí poskytnout speciální HTTP hlavičky. Pojďme je nastavit - a požadavek z druhého webu začne procházet na první:

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