Política CORS en solicitudes AJAX en JavaScript

A través de AJAX no se pueden simplemente hacer solicitudes a otros sitios web (cross-origin requests). Estas solicitudes se rigen por la política CORS. En resumen, según esta política, el sitio al que dirige su solicitud debe aceptar responderla. Para ello, debe enviar los correspondientes encabezados HTTP.

Probemos en la práctica. Ejecutemos dos servidores de prueba en diferentes puertos. El primero en 3001, y el segundo en 3002. Intentemos enviar una solicitud AJAX desde el segundo sitio al primero.

Supongamos que el primer sitio está listo para aceptar las siguientes solicitudes:

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

Enviemos desde el segundo sitio una solicitud al primero:

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

Como resultado, la solicitud no se ejecutará, y en la consola del navegador veremos un error relacionado con la política CORS.

Para que la solicitud se ejecute, el primer servidor debe enviar encabezados HTTP especiales. Especificémoslos - y la solicitud desde el segundo sitio comenzará a llegar al primero:

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