[jQuery] Ajax 통신시 Header에 값 추가하여 전송하기

외부의 데이터를 Restfull 형태의 API로 제공받아 해당 데이터를 핸들링하여 서비스를 구축한적이 있었다.

당시에 특정기능을 구현할때 Ajax를 이용하여 해당 API에 직접 접근하여 데이터를 가져올 상황이 있었는데, 보안관련 이슈때문에 해당 API에 접근하려면 호출하는 Header에 발급받은 ApiKey를 삽입하여 호출해야 하는 상황이 발생하였다.

jQuery Ajax의 경우 beforeSend 부분을 추가하여 쉽게 처리가 가능하였다. 

function to_ajax(){

	$.ajax({
		type : 'get',
		url : '/test.jsp,
		dataType : 'xml',
		beforeSend : function(xhr){
			xhr.setRequestHeader("ApiKey", "asdfasxdfasdfasdf"); 
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		},
		error: function(xhr, status, error){ 
			alert(error); 
		}
		success : function(xml){
			alert(xml)
		},
	});


}

beforeSend는 Ajax를 요청하기 직전의 콜백함수로서 jqXHR 객체를 수정할 수 있다. 위의 경우에도 jqXHR에 헤더값을 추가한 것이다.