트러블슈팅

11/30

1. 문제정의 

Junit에서는 분명히 회원가입이 잘되었는데, spring security 적용 및 api 호출로 웹에서 회원가입을 진행했을때,

403에러가 발생했다.

 

2. 사실수집

403 Forbidden 오류는 클라이언트가 요청을 서버에 전송했을 때, 서버가 해당 요청을 이해하고 있지만, 권한이 없어서 요청을 거부했음을 나타내는 오류이다.

 

3. 원인추론

spring security 6버전은 deprecated 된게 많아서 익숙치 않아서 그렇다고 생각했다. 근데 아니었다.

passwordEncoder부터 차츰차츰 다시 적용해서 테스트해가면서 무엇이 문제인지 살폈다.

• 부트스트랩 템플릿을 적용해서 편하게 프론트 개발을 하려고 했는데, 템플릿js파일때문에 json으로 인코딩되지않음.
• 스프링 시큐리티 적용 시 /error에 대한 권한이 없기 때문에 모든 에러가 403으로 표시됨.

4. 조치 및 방안 검토

 

• 빠른 개발을 위해 부득이하게 로그인 화면은 layout이 없는 화면으로 진행하기로 함.
• RESTFUL로 개발하려고 했는데, HOME기능 빼고 다 layout을 빼야겠다. 템플릿이라고 좋은게 아님...
• 스프링 시큐리티에 /error 경로도 임시로 permitAll로 바꿔놓았음. 이제 에러 코드가 정상적으로 확인가능함.

 

5. 결과 관찰

• RESTFUL로 만들려고 프론트를 템플릿 안하고 다시 진행했다.
• 제이쿼리로 다시 해봤는데... 또 json 인코딩이 안되는 문제 발생
• jQuery가 올바르게 로드 되지 않은 경우 jQuery로 ajax 전송하는게 안먹히고 form태그로 전송될 수 있다는데...
• $(document).ready(function(){진행함수})
• 완전히 로드된 후 실행될 수 있게 자바스크립트를 변경했더니 된다...!!!!!!! ㅠ... 다시 템플릿 적용해서 개발하는걸로!!

<div layout:fragment="script">  <script th:inline="javascript">
    $(document).ready(function() {
        document.getElementById('join-form').addEventListener('submit',function (event){
            event.preventDefault();

            const email = $('#email').val();
            const password = $('#password').val();
            const nickname = $('#nickname').val();

            $.ajax({
                type: "POST",
                url : "/auth/join",
                data : JSON.stringify({
                    "email" : email,
                    "password" : password,
                    "nickname" : nickname
                }),
                contentType : 'application/json',
                success : function (result){
                    alert(result);
                }
            });

        });
    });
</script>
</div>