CORS-beleid in AJAX-verzoeken in JavaScript

Via AJAX kun je niet zomaar verzoeken doen naar andere sites (cross-origin requests). Dergelijke verzoeken worden gereguleerd door het beleid CORS. Kort gezegd, volgens dit beleid moet de site waar je het verzoek naartoe stuurt, ermee instemmen om erop te antwoorden. Hiervoor moet het de juiste HTTP-headers terugsturen.

Laten we het in de praktijk proberen. Laten we twee testservers op verschillende poorten starten. De eerste op 3001, en de tweede op 3002. Laten we proberen een AJAX-verzoek te sturen van de tweede site naar de eerste.

Stel dat de eerste site klaar is om de volgende verzoeken te accepteren:

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

Laten we een verzoek van de tweede site naar de eerste sturen:

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

Als gevolg zal het verzoek niet worden uitgevoerd, en in de browserconsole zien we een fout, gerelateerd aan het CORS-beleid.

Om het verzoek te laten slagen, moet de eerste server speciale HTTP-headers terugsturen. Laten we deze specificeren - en het verzoek van de tweede site zal naar de eerste beginnen te gaan:

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