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