[JS / jQuery] Ajax beforeSend - Ajax 통신 직전에 jqXHR 객체 수정하여 전송하기

Ajax에서 beforeSend란?

 

 

Ajax beforeSend

beforeSend는 Ajax를 요청하기 직전의 콜백함수이다. 

특정기능을 구현할 때 Ajax를 이용하여 해당 API에 직접 접근하여 데이터를 가져오는 상황에서 보안관련 이슈가 생길 수 있다.

 

해당 API에 접근하려면 header의 token을 전달하여 호출해야 하는 상황일 때, Ajax의 경우 beforeSend 부분을 추가하여 쉽게 처리가 가능하다.

 

 

Ajax beforSend 문법

beforeSend를 활용하여 jqXHR 객체를 추가/수정 할 수 있으며, 아래의 경우에도 통신 직전에 jqXHR에 헤더값을 추가하여 전송한 것이다.

 

function f_goAjax(config){

    // 전달할 token, header 값
    var token = $("meta[name='token']").attr("content"),
    var header = $("meta[name='header']").attr("content")

    $.ajax({
        type		: 'POST',
        url 		: '/api/selectApi.do',
        data		: config.data,
        contentType	: "application/json;charset=UTF-8",
        enctype		: "multipart/form-data",
        beforeSend	: function (xhr) {
            // jqXHR 객체 header값 추가
            xhr.setRequestHeader(header, token);
        },
        success	: function(data)	{	
            // ...
        }

    });
}