JavaScript-də AJAX Sorğularında CORS Siyasəti

AJAX vasitəsilə sadəcə olaraq digər saytlara sorğu göndərmək olmaz (cross-origin requests). Belə sorğular CORS siyasəti ilə tənzimlənir. Qısaca desək, bu siyasətə görə, sorğu göndərdiyiniz sayt ona cavab verməyə razılıq verməlidir. Bunun üçün o, müvafiq HTTP başlıqlarını qaytarmalıdır.

Gəlin praktikada sınayaq. İki test serverini müxtəlif portlarda işə salaq. Birincini 3001, ikincini isə 3002 portunda. Gəlin ikinci saytdan birinci sayta AJAX sorğusu göndərməyə çalışaq.

Birinci saytın aşağıdakı sorğuları qəbul etməyə hazır olduğunu fərz edək:

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

İkinci saytdan birinci sayta sorğu göndərək:

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

Nəticədə sorğu yerinə yetirilməyəcək, və brauzerin konsolunda CORS siyasəti ilə əlaqədar bir səhv görəcəyik.

Sorğunun yerinə yetirilməsi üçün birinci server xüsusi HTTP başlıqları qaytarmalıdır. Gəlin onları təyin edək - və ikinci saytdan birinciyə sorğu göndərilməyə başlayacaq:

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