CORS-policyn i AJAX-förfrågningar i JavaScript

Via AJAX kan man inte bara så här göra förfrågningar till andra webbplatser (cross-origin requests). Sådana förfrågningar regleras av policyn CORS. Kortfattat, enligt denna policy måste webbplatsen som du riktar förfrågan till samtycka till att svara på den. För att göra detta måste den returnera motsvarande HTTP-huvuden.

Låt oss prova i praktiken. Låt oss starta två testservrar på olika portar. Den första på 3001, och den andra på 3002. Låt oss försöka skicka en AJAX-förfrågan från den andra webbplatsen till den första.

Låt den första webbplatsen vara redo att ta emot följande förfrågningar:

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

Låt oss skicka en förfrågan från den andra webbplatsen till den första:

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

Som ett resultat kommer förfrågan inte att utföras, och i webbläsarens konsol kommer vi att se ett fel relaterat till CORS-policyn.

För att förfrågan ska kunna utföras måste den första servern returnera speciella HTTP-huvuden. Låt oss ange dem - och förfrågningar från den andra webbplatsen kommer att börja gå till den första:

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