자바스크립트 AJAX 요청의 CORS 정책

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