CORS poliitika AJAX päringutes JavaScriptis

AJAX-i kaudu ei saa lihtsalt teha päringuid teistele veebisaidile (cross-origin requests). Selliseid päringuid reguleerib CORS poliitika. Lühidalt, selle poliitika kohaselt peab sait, millele te päringu suunate, nõustuma sellele vastamisega. Selleks peab ta andma vastavad HTTP päised.

Proovime seda praktikas. Käivitame kaks testserverit erinevatel portidel. Esimene portil 3001 ja teine portil 3002. Proovime saata AJAX päringu teiselt saidilt esimesele.

Olgu esimene sait valmis vastu võtma järgmisi päringuid:

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

Saadame teiselt saidilt päringu esimesele:

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

Tulemusena päring ei täitu ja brauseri konsoolis näeme viga, seotud CORS poliitikaga.

Et päring täituks, peab esimene server andma spetsiaalsed HTTP päised. Määrame need - ja päring teiselt saidilt hakkab esimesele jõudma:

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