Politika CORS në Kërkesat AJAX në JavaScript

Nëpërmjet AJAX nuk mund të bësh thjesht kërkesa në sajte të tjera (cross-origin requests). Kërkesa të tilla rregullohen nga politika CORS. Shkurtimisht, sipas kësaj politike sajti, në të cilin ju dërgoni kërkesën, duhet të pranojë të përgjigjet për të. Për këtë ai duhet të japë headers HTTP përkatëse.

Le të provojmë në praktikë. Le të nisim dy server testues në porta të ndryshme. I pari në 3001, dhe i dyti në 3002. Le të përpiqemi të dërgojmë një kërkesë AJAX nga sajti i dytë në të parin.

Le të supozojmë se sajti i parë është gati të pranojë kërkesat e mëposhtme:

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

Le të dërgojmë nga sajti i dytë një kërkesë në të parin:

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

Si rezultat kërkesa nuk do të ekzekutohet, dhe në konsolën e shfletuesit do të shohim një gabim, të lidhur me politikën CORS.

Që kërkesa të ekzekutohet, serveri i parë duhet të japë headers HTTP speciale. Le t'i përcaktojmë ato - dhe kërkesa nga i dyti sajti do të fillojë të kalojë në të parin:

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