CORS politika AJAX kérésekben JavaScriptben

AJAX-on keresztül nem lehet egyszerűen csak úgy kéréseket intézni más weboldalakhoz (cross-origin requests). Az ilyen kéréseket a CORS politika szabályozza. Röviden, e politika szerint annak a weboldalnak, amelyhez a kérést intézed, bele kell egyeznie, hogy válaszoljon rá. Ehhez megfelelő HTTP fejléceket kell küldenie.

Próbáljuk ki gyakorlatban. Indítsunk el két teszt szervert különböző portokon. Az elsőt a 3001-es porton, a másodikat pedig a 3002-es porton. Próbáljunk meg egy AJAX kérést küldeni a második oldalról az elsőre.

Tegyük fel, hogy az első oldal kész fogadni a következő kéréseket:

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

Küldjünk a második oldalról egy kérést az elsőre:

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

Ennek eredményeképpen a kérés nem fog lefutni, és a böngésző konzoljában egy CORS politikához kapcsolódó hibát fogunk látni.

Ahhoz, hogy a kérés lefusson, az első szervernek különleges HTTP fejléceket kell küldenie. Adjunk meg ezeket - és a második oldalról érkező kérés elkezd majd átjutni az elsőre:

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