![팀 프로젝트 중 JWT 관련 트러블 슈팅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGOvc4%2FbtsHdfVaOGK%2FlpkYCRDEQLxzP9yEX9oNvk%2Fimg.png)
2차 프로젝트 마무리단계라 프론트와 매핑 맞추는 중에 로그인했는데 JWT가 브라우저 헤더에는 들어오지만 Axios로 헤더로 불러와서 콘솔로 찍어봤는데 위에처럼 아무 값이 없는 에러였다. 어떠한 코드로도 불러올 수 없었다.
관련자료를 찾아보니 CORS 정책 때문이었다.
난 분명히 CORS 허용을 다해줬는데도 왜 안되었을까?라는 의구심이 들었는데
알고 보니 CORS정책으로 인해 모든 헤더를 다 보여주지 않고 설정을 추가 안 해주면 Standard 헤더(Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma)만 보여줘서 JWT에 관한 헤더를
Axios 가 받질 못한다고 한다. 그래서 스프링부트 시큐리티 쪽에서 헤더를 추가로 보여주는 설정을 줘야 한다.
프론트에서 reponse.headers를 하든 reponse.data를 하든 값이 없다고 뜬다.
그래서 다음과 같이 설정을 추가해 주었다.
addExposedHeader 설정을 추가해 주었고 로그인 필터에도 추가해 주었다.
기존코드에서 addHeader를 추가했다.
해결되었다.
하루종일 잡고 했는데 또 하나 알아간 점이
https://axios-http.com/docs/res_schema axios 공식레퍼런스에 나와있듯이 헤더 불러올 때 소문자로 불러와야 한다.
보통 대소문자 가리질 않지만 백에서 http 헤더에 대문자로 보내더라도 인식은 하지만 보통 많은 라이브러리들이 내부적으로 소문자로 변경해서 쓴다고 한다. 이거 때문에도 30분은 잡아먹은 거 같다. 그래도 해결하는 과정이 재밌고도 즐거웠다.
해결하는데 도움 많이 준 블로그들 (그저 빛...)
https://lollaziest.tistory.com/230
https://emgc.tistory.com/131
https://coding-business.tistory.com/67
'프로젝트' 카테고리의 다른 글
인생의 2번째 해본 팀 프로젝트 (0) | 2024.05.17 |
---|---|
처음해본 팀 프로젝트 (0) | 2024.04.29 |
이제 갓 시작한 개발자 블로그 계속 발전하겠습니다. 최예나 팬입니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!