Политика CORS в AJAX заявки в JavaScript

Чрез AJAX не може просто така да се правят заявки към други сайтове (cross-origin requests). Такива заявки се регулират от политиката CORS. Накратко, според тази политика сайтът, на който изпращате заявка, трябва да се съгласи да отговори на нея. За това той трябва да върне съответните HTTP заглавки.

Нека опитаме на практика. Стартирайте два тестови сървъра на различни портове. Първият на 3001, а вторият на 3002. Нека се опитаме да изпратим AJAX заявка от втория сайт към първия.

Нека първият сайт е готов да приема следните заявки:

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

Нека изпратим от втория сайт заявка към първия:

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

В резултат заявката няма да се изпълни, а в конзолата на браузъра ще видим грешка, свързана с политиката CORS.

За да се изпълни заявката, първият сървър трябва да върне специални HTTP заглавки. Нека ги укажем - и заявката от втория сайт ще започне да минава към първия:

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