CORS-käytäntö AJAX-pyynnöissä JavaScriptissä

AJAXilla ei voi yksinkertaisesti tehdä pyyntöjä muille sivustoille (cross-origin requests). Tällaisia pyyntöjä säätelee CORS-käytäntö. Lyhyesti sanottuna tämän käytännön mukaan sivusto, johon suuntaat pyynnön, täytyy suostua vastaamaan siihen. Tätä varten sen on palautettava vastaavat HTTP-otsikot.

Kokeillaan käytännössä. Käynnistetään kaksi testipalvelinta eri porteille. Ensimmäinen porttiin 3001 ja toinen porttiin 3002. Yritetään lähettää AJAX-pyyntö toiselta sivustolta ensimmäiselle.

Olkoon ensimmäinen sivusto valmis vastaanottamaan seuraavat pyynnöt:

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

Lähetetään toiselta sivustolta pyyntö ensimmäiselle:

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

Tuloksena pyyntöä ei suoriteta, ja selaimen konsolissa näemme virheen, joka liittyy CORS-käytäntöön.

Jotta pyyntö suoritettaisiin, ensimmäisen palvelimen täytyy palauttaa erityiset HTTP-otsikot. Määritellään ne - ja pyyntö toiselta sivustolta alkaa mennä läpi ensimmäiselle:

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