axios 요청 시 header에 Token이 담기지 않는 문제 해결

프론트 측에서 사용자 A(판매자)와 B(구매자)간 거래가 완료되었을 때 A가 거래 완료 버튼을 눌러 Trade Entity의 Complete_Trade 컬럼을 false에서 true로 변경해주는 Patch API가 동작하지 않는다는 피드백을 받았다.
 
프론트에서 axios.patch로 uri에 정확이 요청이 들어오는데 서버 로그를 확인해보면 아래와 같이 MethodNotSupportedException이 터져버린 것이다. (Postman으로 할 땐 잘되는데)

분명 Postman으로 테스트했을 때도 잘 동작하고, 테스트 코드도 문제없었는데.. 한참 서칭하다가 프론트 측에서 CORS 에러가 발생한다는 것을 알게되었다. 친구가 하다보면 CORS 많이 터질거라고 겁 줄때 초반에 한번 잡아두니까 이제 안터진다고 떵떵거렸는데 벌받은것 같다.

ㅇ왜

단순 CORS 설정에 문제가 있나 싶어서 CORS 설정만 수정해주면 해결 될 것이라 생각했다.
 
CorsConfig를 계속 수정하고 빌드하고 수정하고 빌드하고 했는데도 해결이 안되고 이 에러에서 더 이상 진전이 없었다.
 
 

[Spring boot X Spring Security] CORS 설정하기

그러던 도중 위 글을 보고 Security 또한 CORS 설정을 해야 한다는 것을 알게 되었고 여차저차 Security에도 CORS 설정을 해주었다.
 
그렇게 빌드하고 서버를 키고 요청을 보내봤는데 CORS는 안 터지는데 콘솔에는 500 에러와 함께 서버에는 또 다시 MethodNotSupportedException이..

이쯤되니 CORS가 뜨지 않는데도 CORS 문제인지 다른 문제가 있는 건지 헷갈리기 시작했다. 
 
이 전에 본인정보 수정하는 API도 patch method였는데 그 때는 프로필 이미지 관련 CORS가 발생해서 리펙해서 한번에 해결했는데 이번에는 이미지도 없고 단순히 컬럼값만 바꾸겠다는데 왜 이걸 막는지 모르겠ㄷ다ㅣ
 
무튼 문제를 일단 해결은 해야되니까 프론트에서 개발자 도구로 콘솔을 다 뜯어보았다. 서버에서 설정해둔 JwtFilter에서 걸리는 것을 확인했다.
 
이게 무슨말이냐 하면 로그인을 하면 Access Token과 Refresh Token을 발급해주는데 헤더에 그 토큰이 들어가지 않고 요청을 보낸 것이였다.
 
로그인 에러를 보니 왜 서버에서 MethodNotSupportedException이 터지는지 대강 유추할 수 있었다.
 
유추한 바로는 이렇다.

주의 : 위 그림과 밑에 번호는 크게 상관이 없습니다.

1. 클라이언트에서 사용자 정보가 담긴 토큰과 함께 요청을 보냈다.
2. 서버에서 토큰이 필요한 요청임을 인지하고 토큰을 확인해야 하는데 토큰이 없다.
3. 토큰에 문제가 있거나 토큰 자체가 없으면 JwtAuthenticationEntryPoint에서 /exception/entry-point로 "GET" 메소드로 리다이렉션하고 ExceptionController에서 이 URI랑 매핑된 메소드가 실행되서 Response에 에러를 담아 리턴하도록 설정되어 있따.
4.  /exception/entry-point로 "GET"이 아닌 1번에서 요청한 메소드인 PATCH로 되니 서버에서 저렇게 예외가 터지는 것 같다.

3번에서 왜 GET이 아닌 PATCH로 리다이렉션되는지는 뒤에서 마저 생각해보자. 일단 급한 건 토큰이 왜 헤더에 안담기는지 알아내는 것이 먼저니까

@Component
public class JwtAuthenticationEntryPoint implements AuthenticationEntryPoint {
    private static final String EXCEPTION_ENTRY_POINT = "/exception/entry-point";
    @Override
    public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException {

        response.sendRedirect(EXCEPTION_ENTRY_POINT);
    }
}

@ApiIgnore
@RestController
@RequestMapping("/exception")
public class ExceptionController {

    @GetMapping("/access-denied")
    public void accessDeniedException() {
        throw new AccessDeniedException();
    }

    @GetMapping("/entry-point")
    public void authenticateException() {
        throw new AuthenticationEntryPointException();
    }

    @GetMapping("/invalid-token")
    public void validateTokenException() {
        throw new ValidateTokenException();
    }

    @GetMapping("/guard")
    public void guardException() {
        throw new GuardException();
    }

    @GetMapping("/no-token")
    public void tokenNotFoundException() {
        throw new TokenNotFoundException();
    }
}

 
그래서 자바스크립트 코드를 읽어보니 (읽을 줄 모르지만) 요청 헤더에 A/R Token을 잘 담아 주었는데 실제로 요청 헤더를 보면 어느 토큰하나 담겨있지 않았다. 구글링을 해보니 나와 정확하게 같은 문제를 겪은 분의 글을 발견했다.
 

axios 요청시 header에 토큰이 들어가지 않는 문제 해결하기(feat. 약 5시간 삽질)

 
글을 읽어보면 나와 매우매우매우 비슷한 맥락에서의 문제를 겪고 계셨다. 심지어 또 시도해본 해결과정들이 나와 정확히 같았다.
아마 이 글을 못봤다면 아직도 CORS이니 필터 문제니 시큐리티 문제니 하며 삽질했을 것이다.
 
결론적으로 문제가 뭐였냐면 프론트에서 body에 아무런 데이터가 없는 경우에 token이 서버에 전송되지 않았던 것이다.

아오

API의 요청 body에 왜 아무데이터도 없냐면 이 API는 id 값만 보내면 해당 Trade의 ID값을 찾아 컬럼값만 스위칭하는 것이기 때문이였는데, axios는 아무런 데이터를 보내지 않을 땐 null값이라도 넘겨야 했던 것이다;;; axios에 null을 담아 보내주니 잘 작동하는것을 확인할 수 있었다.
 
여차저차 해결은 했는데, 이정도로 디버깅 과정에서 삽질을 많이한건 이번이 처음인것 같다.
 
아 그리고 아직 찝찝한 부분이 하나 남았다. /exception/entry-point로 "GET"이 아닌 "PATCH"로 요청을 해서 괜히 헷갈리게 만드는 것이냐는 것이다.
 
내 생각이건데, Body에 아무런 데이터가 없을 때는 프론트에서 null이라도 담아 보내주어야 하는데 그렇지 않았다 보니 body 자체를 보내지 않게 되고, 이 과정에서 토큰도 들어가지 않다보니 여러여러 상황이 겹쳐서 최초 요청 메소드였던 PATCH가 그대로 Redirection에 흘러 들어간 것 같다. 한마디로 버그