[JQuery] .ajaxSend 와 ajaxSetup(), beforeSend 설정 (csrf token 설정)

환경 = Spring Boot, JQuery, thymeleaf

 

Spring Boot 와 Thymeleaf  환경에서 JQuery Ajax 요청 중 Spring Security 의 CSRF Token을 헤더에 기본적으로

설정하기 위해 찾아보다가 ajaxSend 함수와 ajaxSetup() 의 beforeSend 를 보아 정리한다.

 

 

.ajaxSend(function(e, xhr, options){ ... })

ajaxSend 는 JQuery 에서 Ajax 요청을 보내기 전에 실행시킬 함수를 정의한다.

즉, Ajax 이벤트 처리기이다. Ajax 요청을 보내기 전에 매번 ajaxSend() 함수 이벤트를 발생시킨다.

 

Ajax 요청을 서버에 보내기전에 공통적으로 처리해야할 것이 있을 때 사용한다.

 

사용법

// JQuery 공식 문서
.on("ajaxSend", handler)


// 사용법 (Spring Security Csrf token header 설정)
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
const token = $("meta[name='_csrf']").attr('content');
const token_header = $("meta[name='_csrf_header']").attr('content');

$(document).ajaxSend(function(e, xhr, options){
	xhr.setRequestHeader(token_header, token);
});

 

 

 

 

JQuery.ajaxSetup({옵션})

JQuery Ajax 요청 시 옵션 값들을 공통적으로 설정하기 위해 사용한다.

Ajax 요청할 때마다 동일한 옵션값으로 설정하게 되면 유지보수가 어려우므로

공통적인 부분을 ajaxSetup 함수를 통해 설정할 수 있다.

 

본인은 ajax 요청 전 설정을 하기 위해서 beforeSend 옵션을 사용했다.

 

<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
const token = $("meta[name='_csrf']").attr('content');
const token_header = $("meta[name='_csrf_header']").attr('content');

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader(token_header, token);
        }
    }
});

 

 

옵션

Name	Value/Description
async	Boolean 값
	요청이 비동기식으로 처리되는지 여부를 나타낸다.
	기본값은 true
beforeSend(xhr)	요청을 보내기 전에 실행되는 함수
cache	Boolean 값
	브라우저가 요청된 페이지를 캐싱해야 하는지 여부를 나타낸다.
	기본값은 true
complete(xhr,status)	요청이 완료됐을 때 실행되는 함수
contentType	서버로 보내지는 데이터의 content-type
	기본값은 “application/x-www-form-urlencoded"
data	서버로 보내지는 데이터를 의미
dataFilter(data,type)	XMLHttpRequest의 응답 데이터를 처리할 때 사용되는 함수
dataType	서버 응답으로 받는 데이터 타입
error(xhr,status,error)	요청이 실패했을 때 실행되는 함수
global	Boolean 값
	요청에 대해 전역 AJAX 이벤트를 실행할 지 여부를 명시함
	기본값은 true
ifModified	Boolean 값
	마지막 요청 이후에 응답이 변경됐을 때만 처리하는지를 명시
	기본값은 false
jsonp	jsonp 요청에서 callback 함수를 오버라이딩하는 문자열
jsonpCallback	jsonp 요청에서 callback 함수 이름을 나타낸다.
password	HTTP 접근 인증(access authentication) 요청에 사용할 password를 나타낸다.
processData	Boolean 값
	요청으로 보낸 데이터를 query string 형태로 변환할지 여부를 나타낸다.
	기본값은 true
scriptCharset	요청할 때의 charset을 나타낸다.
success(result,status,xhr)	요청이 성공했을 때 수행되는 함수
timeout	요청에 대해 로컬의 응답제한시간(timeout)을 밀리초로 나타낸다.
type	요청 type(GET 혹은 POST)을 명시함
url	요청을 보낼 URL을 나타낸다.
	기본값은 현재페이지
username	HTTP 접근 인증(access authentication) 요청에 사용할 username을 나타낸다.
xhr	XMLHttpRequest 오브젝트를 생성할 때 사용하는 함수