CORS-politikk i AJAX-forespørsler i JavaScript

Via AJAX kan du ikke bare gjøre forespørsler til andre nettsteder (cross-origin requests). Slike forespørsler reguleres av politikken CORS. Kort fortalt, i henhold til denne politikken må nettstedet som du retter en forespørsel til, samtykke i å svare på den. For å gjøre dette må det levere de tilsvarende HTTP-headerne.

La oss prøve i praksis. La oss starte to testservere på forskjellige porter. Den første på 3001, og den andre på 3002. La oss prøve å sende en AJAX-forespørsel fra det andre nettstedet til det første.

La det første nettstedet være klart til å motta følgende forespørsler:

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

La oss sende en forespørsel fra det andre nettstedet til det første:

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 et resultat vil ikke forespørselen bli utført, og i nettleserens konsoll vil vi se en feil, relatert til CORS-politikken.

For at forespørselen skal bli utført, må den første serveren levere spesielle HTTP-headere. La oss spesifisere dem - og forespørselen fra det andre nettstedet vil begynne å gå til det første:

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