Πολιτική CORS σε AJAX αιτήματα σε JavaScript

Δεν είναι δυνατόν να κάνετε απλά αιτήματα AJAX σε άλλους ιστότοπους (cross-origin requests). Τέτοια αιτήματα ρυθμίζονται από την πολιτική CORS. Εν συντομία, σύμφωνα με αυτήν την πολιτική, ο ιστότοπος στον οποίο στέλνετε το αίτημα, πρέπει να συμφωνήσει να το απαντήσει. Για να το κάνει αυτό, πρέπει να στείλει τις αντίστοιχες κεφαλίδες HTTP.

Ας δοκιμάσουμε στην πράξη. Ας εκκινήσουμε δύο δοκιμαστικούς διακομιστές σε διαφορετικές θύρες. Ο πρώτος στη 3001 και ο δεύτερος στη 3002. Ας προσπαθήσουμε να στείλουμε ένα αίτημα AJAX από τον δεύτερο ιστότοπο στον πρώτο.

Ας υποθέσουμε ότι ο πρώτος ιστότοπος είναι έτοιμος να δεχτεί τα ακόλουθα αιτήματα:

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

Ας στείλουμε ένα αίτημα από τον δεύτερο ιστότοπο στον πρώτο:

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

Ως αποτέλεσμα, το αίτημα δεν θα εκτελεστεί, και στην κονσόλα του προγράμματος περιήγησης θα δούμε ένα σφάλμα, σχετικό με την πολιτική CORS.

Για να εκτελεστεί το αίτημα, ο πρώτος διακομιστής πρέπει να στείλει ειδικές κεφαλίδες HTTP. Ας τις ορίσουμε - και το αίτημα από τον δεύτερο ιστότοπο θα αρχίσει να περνάει στον πρώτο:

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