한동안 React만 쓰다가 오랜만에 Next 쓰려니까 이것저것 적응하느라 애먹고 있었는데.. 좀 이해했다! 싶으니 JWT에서 문제가 생겼다!
현재 상황은 JWT를 쿠키에 저장해서 쿠키 헤더로 던지면서 통신을 하는 것인데..
분명 Network 탭에는 쿠키가 담겨있는데 계속 401 에러가 뜨는 것이다 Why..
백엔드 쪽을 확인해봐도 쿠키가 들어오지 않는다고만 나온다. 분명 던지고 있는데 어디가 문제인지 계속 파악도 안되고 계속 삽질만 하다가
"이거 통신 순서가 어떻게 되더라 ..?"
라는 생각이 딱 지나갔다. 이게 제일 중요한거였다 ㅠㅠ
현재 Next의 Route를 쓰고있기 때문에
클라이언트 → Next route → 서버
순서로 api를 호출하고 있다. next가 중개인을 해주고 있는 중인데, 나는 next에만 쿠키를 던지고 next에서 서버로 향할 때 쿠키가 없었기 때문에 서버는 쿠키를 못받고있던 것이다 .....
이거는 간단하게 해결 가능하다
route.ts 에서 headers에 아래 코드(?) 한줄을 추가한 것으로 단방에 해결됐다...
'Cookie': request.headers.get('cookie') || ''
이렇게 하면 클라이언트에서 Next로 던지는 API 헤더의 'Cookie'를 그대로 가지고 와서 자신의 'Cookie' 헤더에 넣고, 그대로 서버로 던져준다!
(request는 parameter 명칭이다 헷갈리지 않기)