JavaScript'te AJAX İsteklerinde CORS Politikası

AJAX ile diğer sitelere istek yapamazsınız (cross-origin requests). Bu tür istekler CORS politikası tarafından düzenlenir. Kısaca, bu politikaya göre, istek gönderdiğiniz site ona cevap vermeyi kabul etmelidir. Bunun için ilgili HTTP başlıklarını döndürmelidir.

Pratikte deneyelim. İki test sunucusunu farklı portlarda çalıştıralım. Birincisi 3001, ikincisi ise 3002 portunda. İkinci siteden birinciye bir AJAX isteği göndermeyi deneyelim.

Birinci sitenin aşağıdaki istekleri kabul etmeye hazır olduğunu varsayalım:

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

İkinci siteden birinciye bir istek gönderelim:

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

Sonuç olarak istek gerçekleşmeyecek, ve tarayıcı konsolunda CORS politikasıyla ilişkili bir hata göreceğiz.

İsteğin gerçekleşmesi için, birinci sunucu özel HTTP başlıklarını döndürmelidir. Bunları belirleyelim - ve ikinci siteden birinciye istek geçmeye başlayacak:

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