CORS politika AJAX pieprasījumos JavaScript

Izmantojot AJAX, nevar vienkārši veikt pieprasījumus uz citām vietnēm (cross-origin requests). Šādus pieprasījumus regulē CORS politika. Īsumā, saskaņā ar šo politiku, vietne, uz kuru jūs virzāt pieprasījumu, ir jāpiekrīt uz to atbildēt. Lai to izdarītu, tai jānodod atbilstošas HTTP galvenes.

Izmēģināsim praksē. Palaist divus testa serverus dažādos portos. Pirmo uz 3001, bet otro uz 3002. Mēģināsim nosūtīt AJAX pieprasījumu no otrās vietnes uz pirmo.

Lai pirmā vietne ir gatava pieņemt šādus pieprasījumus:

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

Nosūtīsim no otrās vietnes pieprasījumu uz pirmo:

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

Rezultātā pieprasījums neizpildīsies, un pārlūka konsole mēs redzēsim kļūdu, kas saistīta ar CORS politiku.

Lai pieprasījums izpildītos, pirmajam serverim jānodod speciālas HTTP galvenes. Norādīsim tās - un pieprasījums no otrās vietnes sāks iet uz pirmo:

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