Politique CORS dans les requêtes AJAX en JavaScript

Il n'est pas possible de faire simplement des requêtes vers d'autres sites via AJAX (cross-origin requests). De telles requêtes sont régies par la politique CORS. En bref, selon cette politique, le site vers lequel vous envoyez la requête doit accepter d'y répondre. Pour cela, il doit renvoyer les en-têtes HTTP appropriés.

Essayons pratiquement. Lançons deux serveurs de test sur des ports différents. Le premier sur 3001, et le second sur 3002. Essayons d'envoyer une requête AJAX du second site vers le premier.

Supposons que le premier site est prêt à recevoir les requêtes suivantes :

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

Envoyons une requête du second site vers le premier :

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

En conséquence, la requête ne s'exécutera pas, et dans la console du navigateur nous verrons une erreur, liée à la politique CORS.

Pour que la requête s'exécute, le premier serveur doit renvoyer des en-têtes HTTP spécifiques. Spécifions-les - et la requête du second site commencera à passer vers le premier :

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