CORS-politikken i AJAX-forespørgsler i JavaScript

Med AJAX kan du ikke bare lave forespørgsler til andre websteder (cross-origin requests). Sådanne forespørgsler reguleres af politikken CORS. Kort fortalt, ifølge denne politik skal webstedet, som du retter din forespørgsel til, samtykke i at besvare den. For at gøre dette skal det sende de relevante HTTP-headere.

Lad os prøve det i praksis. Lad os starte to testservere på forskellige porte. Den første på 3001, og den anden på 3002. Lad os prøve at sende en AJAX-forespørgsel fra det andet websted til det første.

Lad det første websted være klar til at modtage følgende forespørgsler:

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

Lad os sende en forespørgsel fra det andet websted 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 forespørgslen ikke blive udført, og i browserens konsol vil vi se en fejl relateret til CORS-politikken.

For at forespørgslen skal udføres, skal den første server sende specielle HTTP-headere. Lad os angive dem - og forespørgslen fra det andet websted vil begynde at gå igennem 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';
	}
}