[Spring Security + JWT] 크롬과 Postman의 인증 결과가 다른현상

지금은 미니프로젝트를 진행중이기 때문에 프론트서버를 따로 두지 않아서, 백엔드 서버에서 함께 동작시켜야 하는 상황이다.

 

문제: 크롬과 Postman의 JWT 인증결과가 다름

먼저 로그인을 하면 응답헤더에 JWT를 포함하여 바디와 함께 응답한다.

응답을 받은 클라이언트는 헤더에 JWT를 포함하여 /user로 GET 요청한다.

/user 는 토큰의 인증이 있어야 접근할 수 있는 url이다.

 

브라우저에서 토큰 인증할 때,

로그인 이후 요청 헤더에 JWT 잘 넣어서 들어오고, 인증도 잘 마쳐진 상태이다.

토큰 제대로 들어오고, 인증 처리 완료돼서 Security Context Holder에 UserDetail 정보도 잘 저장된다.

 

 

근데 막상 크롬에서 페이지 이동이 잘 되었나 보면

인증이 안됨

?????

 

postman으로 실험해본다.

왜 잘되냐고

 

 

실험: 토큰이 달라서 그런가?

브라우저로 로그인하고 /user로 요청했을 때 로그에 찍힌 토큰 가지고 PostMan에서 실험

어림도 없음 크롬에서는 안되고 postman은 잘된다.

 

증 절차는 잘못된 거 같지 않다.

 

왜냐하면 포스트맨에서는 잘 동작하기 때문이다.

토큰도 잘 들어오는 걸 보니 요청 헤더에 잘 들어있는 걸 확인할 수 있다.

그렇다면 내가 잘 모르는 부분에서 잘못됐을 확률이 높을 것이다.

 

그 부분은 바로 javaScript

login: function (){
        let data = {
            username: $("#username").val(),
            password: $("#password").val()
        }

        $.ajax({
            type: "POST",
            url: "/login",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

        }).done((response, textStatus, xhr) => {

            this.jwt = xhr.getResponseHeader("Authorization");
            console.log(response);
            console.log(this.jwt);

            this.sendAuthorizationRequest("/user")
        });
    },

    sendAuthorizationRequest: function (url) {
        $.ajax({
            type: "GET",
            url: url,
            beforeSend: (xhr) => {
                xhr.setRequestHeader("Authorization", `${this.jwt}`)
            },
            success: (response) => {
                console.log(response)
                window.location.href = url;
            }
        })

로그인 버튼을 누르면 응답 헤더에서 jwt를 가져와 저장하고

요청 헤더에 토큰을 포함한 뒤 /user로 GET요청 하도록 작성했다.

 

그럼 테스트를 위해 일단 토큰이 제대로 들어오는지부터 확인하도록 하자.

어 ???? GET 요청이 두번 발생하는데 처음은 토큰을 가지고 있고, 다음 요청에는 토큰이 없다는 것을 확인했다.

 

드디어 뭔가 실마리가 보였다.

 

sendAuthorizationRequest: function (url) {
   $.ajax({
        type: "GET",
        url: url,
        beforeSend: (xhr) => {
            xhr.setRequestHeader("Authorization", `${this.jwt}`)
        },
        success: (response) => {
            console.log(response)
            window.location.href = url;
        }
    })

보니까 /user 로 GET 요청 보낸 다음 응답 정상적이면 다시 /user GET 요청을 보내는 꼴인 거 같다.

이게 왜 이제야 보일까,,

 

매 요청마다 헤더에 JWT를 넣어서 보내야되는데

자바 스크립트로 GET 요청만 하면 페이지 이동이 안된다. 

location.href로 페이지 이동을 해야하는데,, 여기서 헤더에 토큰을 넣을 수가 있는걸까?

아무리 찾아봐도 나오지가 않는다.. GPT도 불가능하다고 한다.

그럼 이걸 어떻게 구현해야 하는걸까???

 

 

결론

• 어떤 url에 ajax 통신으로 요청을 보내고 성공일 시 해당 url로 이동하도록 코드를 작성했다면, 해당 url로 요청이 두번 발생함.
• 문제는 역시 내가 잘 모르는 곳에서 발생할 확률이 큼
• 로깅은 필수.