Палітыка 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';
	}
}