Politica CORS nelle richieste AJAX in JavaScript

Con AJAX non è possibile effettuare semplicemente richieste ad altri siti (cross-origin requests). Tali richieste sono regolate dalla politica CORS. In breve, secondo questa politica, il sito a cui si indirizza la richiesta deve acconsentire a rispondere. Per fare ciò, deve restituire le opportune intestazioni HTTP.

Proviamo nella pratica. Avviamo due server di test su porte diverse. Il primo sulla 3001, e il secondo sulla 3002. Proviamo a inviare una richiesta AJAX dal secondo sito al primo.

Supponiamo che il primo sito sia pronto a ricevere le seguenti richieste:

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

Inviiamo dal secondo sito una richiesta al primo:

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

Di conseguenza, la richiesta non verrà eseguita, e nella console del browser vedremo un errore legato alla politica CORS.

Affinché la richiesta venga eseguita, il primo server deve restituire speciali intestazioni HTTP. Specifichiamole - e la richiesta dal secondo sito inizierà a raggiungere il primo:

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