Polityka CORS w żądaniach AJAX w JavaScript

Przez AJAX nie można po prostu wykonywać żądań do innych stron (cross-origin requests). Takie żądania reguluje polityka CORS. W skrócie, według tej polityki strona, na którą kierujesz żądanie, musi wyrazić na nie zgodę. W tym celu musi zwrócić odpowiednie nagłówki HTTP.

Spróbujmy w praktyce. Uruchommy dwa testowe serwery na różnych portach. Pierwszy na 3001, a drugi na 3002. Spróbujmy wysłać żądanie AJAX z drugiej strony na pierwszą.

Niech pierwsza strona będzie gotowa przyjmować następujące żądania:

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

Wyślemy z drugiej strony żądanie na pierwszą:

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

W rezultacie żądanie nie wykona się, a w konsoli przeglądarki zobaczymy błąd, związany z polityką CORS.

Aby żądanie się wykonało, pierwszy serwer musi zwrócić specjalne nagłówki HTTP. Wskażmy je - i żądanie z drugiej strony zacznie przechodzić na pierwszą:

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