[TIL] 스프링 서큐리티 사용시 ajax요청 주의점 2022-10-24

$.ajax({
    type: "POST",
    url: "/orders/deleteorders",
    contentType: 'application/json; charset=utf-8',
    dataType: "json",
    data: JSON.stringify({
        merchant_uid: merchantId,
        cancel_request_amount: totalPrice,
        reason: "테스트 결제 환불",
    })
}).done((response) => {
    alert(response.merchant_uid);
    alert("성공")
}).fail(function (error){
    alert("실패")
    alert(JSON.stringify(error));
});

이런 방식으로 ajax요청을 했는데 403에러부터 여러가지 에러나 발생해서 해결법을 적어둠.

 

1. 스프링 서큐리티 사용할때, ajax요청시 403에러 발생 해결법

1. 오늘 아임포트 결제 취소 구현하려고 여러가지 하다가 ajax요청이 죽어도 컨트롤러로 안가고.. 갔는데 계속 fail로 response가 와서 거의 하루를 다 날렸다. 그래서 적어두는 내용.
2. 클라이언트의 javascript에서의 ajax요청시 모든 값들이 정상이라는 가정.
3. f12눌러서 나오는 에러가 403일때 스프링 서큐리티 사용한다면 링크를 참고해서 해결하면 된다.

https://velog.io/@jyleedev/514-ajax-post-%ED%86%B5%EC%8B%A0-403-error

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

2. 1번의 이유가 발생하는 이유와 csrf의 개념

1. 간단히 말해서 스프링 서큐리티에서 csrf 공격을 막기 위해서 token을 사용하는데, 위 링크 방법을 사용하지 않으면 token이 없기 때문에 ajax요청을 해도 서큐리티에서 막아서 우리는 요청을 전달할 수 없다는 것이다.
2. 자세한 내용은 아래 링크 참고!

https://codevang.tistory.com/282

Spring Security_CSRF Token의 개념과 사용 방법

 

3. readyState=4, status=200 일때 나는 parsererror 이유

1. ajax 요청의 dataType 문제다. json으로 작성했는데 controller에서는 String으로, 즉 text로 response해줄 때 나는 오류이다.
2. dataType:'text' 로 변경하거나 controller에서 json으로 응답하게끔 오브젝트를 반환해주면 해결된다.