[Ajax 에러] - 스프링 시큐리티 ajax post 통신 403 forbidden error

ajax 통신 시 403 forbidden 에러 발생

가장 많이 볼 수 있었던 오류

임시 비밀번호를 전송하는 컨트롤러(/sendPwd) 를 호출하기 위해 생성한 javascript 함수 sendEmail 호출 시
SecurityConfig에서 해당 컨트롤러에 대한 권한을 모두 permit 해줬음에도 불구하고 계속 403 에러가 떴다.
path 권한 문제가 아닌 것 같았다.
더 찾아보니 csrf(Cross-site request forgery)의 token이 누락으로 발생한다고 한다.

해결

아래와 같이 html의 head 태그 내에 csrf meta tag를 추가해준다

<meta name="_csrf_header" th:content="${_csrf.headerName}">
<meta name="_csrf" th:content="${_csrf.token}">

jQuery ajax 요청시 csrf 값을 요청 전에 헤더에 담아서 보내면 된다.

var header = $("meta[name='_csrf_header']").attr('content');
var token = $("meta[name='_csrf']").attr('content');
 
$.ajax({
    url: url,
    beforeSend: function(xhr){
        xhr.setRequestHeader(header, token);
    },
    success: function(res) {
        console.log(res);
    }
});

이렇게 하면 이후 전송되는 Ajax 호출의 header에 csrf token이 추가되어 전송되기 때문에 csrf token으로 인한 403 에러는 발생하지 않는다.

---

출처
https://sarc.io/index.php/cloud/2096-spring-boot-security-ajax-post-403
https://www.popit.kr/spring-security-ajax-%ED%98%B8%EC%B6%9C-%EC%8B%9C-csrf-%EA%B4%80%EB%A0%A8-403-forbidden-%EC%97%90%EB%9F%AC/