Política CORS em requisições AJAX em JavaScript

Via AJAX, não é possível simplesmente fazer requisições para outros sites (cross-origin requests). Tais requisições são reguladas pela política CORS. Resumidamente, por esta política, o site para o qual você direciona a requisição deve concordar em respondê-la. Para isso, ele deve retornar os cabeçalhos HTTP apropriados.

Vamos testar na prática. Vamos executar dois servidores de teste em portas diferentes. O primeiro na 3001, e o segundo na 3002. Vamos tentar enviar uma requisição AJAX do segundo site para o primeiro.

Suponha que o primeiro site esteja pronto para receber as seguintes requisições:

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

Vamos enviar do segundo site uma requisição para o primeiro:

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, a requisição não será executada, e no console do navegador veremos um erro relacionado à política CORS.

Para que a requisição seja executada, o primeiro servidor deve retornar cabeçalhos HTTP especiais. Vamos especificá-los - e a requisição do segundo site começará a passar para o primeiro:

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