Politika CORS v AJAX zahtevah v JavaScriptu

Z AJAX-om ni mogoče preprosto pošiljati zahtev na druge spletne strani (cross-origin requests). Takšne zahteve ureja politika CORS. Na kratko, po tej politiki se mora spletna stran, na ktéro pošiljate zahtevo, strinjati z njenim obdelovanjem. Za to mora vrniti ustrezne HTTP glave.

Poskusimo v praksi. Zaženimo dva testna strežnika na različnih vratih. Prvega na 3001, drugega pa na 3002. Poskusimo poslati AJAX zahtevo z druge spletne strani na prvo.

Naj prva spletna stran sprejema naslednje zahteve:

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

Pošljimo z druge spletne strani zahtevo na prvo:

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

Kot rezultat se zahteva ne bo izvedla, v brskalnikovi konoli pa bomo videli napako, povezano s politiko CORS.

Da se zahteva izvede, mora prvi strežnik vrniti posebne HTTP glave. Določimo jih - in zahteva z druge spletne strani bo začela delovati na prvi:

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