CORS politika AJAX užklausose JavaScript

Per AJAX negalima tiesiog taip siųsti užklausų į kitas svetaines (cross-origin requests). Tokias užklausas reguliuoja CORS politika. Trumpai tariant, pagal šią politiką svetainė, į kurią nukreipiate užklausą, turi sutikti į ją atsakyti. Tam ji turi grąžinti atitinkamas HTTP antraštes.

Pabandykime praktiškai. Paleiskime du testinius serverius skirtinguose prievaduose. Pirmą ant 3001, o antrą ant 3002. Pabandykime išsiųsti AJAX užklausą iš antros svetainės į pirmą.

Tegul pirmoji svetainė yra pasirengusi priimti šias užklausas:

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

Išsiųskime iš antros svetainės užklausą į pirmą:

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

Dėl to užklausa nebus vykdyta, o naršyklės konsolėje pamatysime klaidą, susijusią su CORS politika.

Kad užklausa būtų vykdyta, pirmasis serveris turi grąžinti specialias HTTP antraštes. Nurodykime jas - ir užklausa iš antros svetainės pradės veikti į pirmą:

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