Politica CORS în cererile AJAX în JavaScript

Prin AJAX nu poți face simplu cereri către alte site-uri (cross-origin requests). Astfel de cereri sunt reglementate de politica CORS. Pe scurt, conform acestei politici, site-ul către care direcționezi cererea, trebuie să fie de acord să îi răspundă. Pentru aceasta, trebuie să trimită antetele HTTP corespunzătoare.

Să încercăm în practică. Să pornim două servere de test pe porturi diferite. Primul pe 3001, iar al doilea pe 3002. Să încercăm să trimitem o cerere AJAX de la al doilea site către primul.

Să presupunem că primul site este gata să primească următoarele cereri:

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

Să trimitem de la al doilea site o cerere către primul:

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

Ca urmare, cererea nu se va executa, iar în consola browserului vom vedea o eroare, legată de politica CORS.

Pentru ca cererea să se execute, primul server trebuie să trimită antete HTTP speciale. Să le specificăm - și cererea de la al doilea site va începe să funcționeze către primul:

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