CORS politika u AJAX zahtevima u JavaScriptu

Preko AJAX-a ne možete jednostavno slati zahteve ka drugim sajtovima (cross-origin requests). Takvi zahtevi regulisani su politikom CORS. Ukratko, prema ovoj politici, sajt ka kojem šaljete zahtev mora da pristane da na njega odgovori. Da bi to uradio, mora da pošalje odgovarajuće HTTP zaglavlja.

Hajde da probamo u praksi. Pokrenimo dva testna servera na različitim portovima. Prvi na 3001, a drugi na 3002. Pokušajmo da pošaljemo AJAX zahtev sa drugog sajta na prvi.

Neka prvi sajt bude spreman da prihvati sledeće zahteve:

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

Pošaljimo sa drugog sajta zahtev na prvi:

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

Kao rezultat, zahtev se neće izvršiti, a u konzoli brauzera videćemo grešku povezanu sa CORS politikom.

Da bi se zahtev izvršio, prvi server mora da pošalje posebna HTTP zaglavlja. Hajde da ih navedemo — i zahtev sa drugog sajta će početi da prolazi na prvi:

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