사이드프로젝트 진행 중 소셜로그인을 구현하고 있었습니다.
소셜타입은 총 세가지로 [naver,kakao,google]인데 이 중 naver,kakao는 vercel 배포시 모두 콜백페이지로 정상적으로 redirect 되었지만 이상하게 google만 redirect 되지않고
네트워크탭에서 무한 리다이렉트가 일어나고 있었습니다. (덕분에 스트레스 좀 받았네요..ㅋㅋㅠ)
음 결론부터 말씀드리면 url에, 아니 정확히하면 쿼리 파라미터에 "+"가 포함된 요청이 들어오게되면 Nuxt와 vercel proxy가 요청 구문을 분석하는데 있어 충돌이 발생하여 무한 리다이렉트 현상이 발생합니다.
찾아보니 이 이슈는 이전에 해결이 되었었지만 Nuxt 버전이 3.11.2로 릴리즈되면서 다시 발생한 문제라고 합니다.
[참고] https://github.com/nuxt/nuxt/issues/26882
일단 가장 간단하게 해결하는 법은 Nuxt팀이 문제를 해결하기전까지 Nuxt 버전을 3.11.1 버전으로 다운그레이드 하는 것입니다. 실제로 테스트 해봤는데 잘 됩니다.
두번째 방법은 꼼수긴 하지만...
미들웨어에서 to.fullPath에 포함된 + 문자를 찾아 모두 %20으로 replace해주면 됩니다.
// Example -- auth-login.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
// Nuxt3 라우터와 Vercel Proxy에서 '+' 문자에 관한 쿼리 파라미터를 해석하는 방식에 충돌이 있어 리다이렉트 되지 않는 문제의 임시조치
// 참고1 => https://github.com/nuxt/nuxt/issues/14316 #14316 Infinite redirect when the url contains ANY "+" character breaking the application
// 참고2 => 이 문제는 이전부터 존재했던 문제였으며, 수정되었으나 최근, nuxt@3.11.2 버전에서 다시 문제가 일어나서 issue에 등록되어있음, 그래서 임시조치로 3.11.1 버전으로 다운그레이드함
// 로컬에서는 문제가 없기에 한번 걸러줍니다
if (process.env.NODE_ENV === 'production') {
if (to.fullPath.includes('+')) {
to.fullPath = to.fullPath.replace(/\+/g, '%20');
}
}
});이렇게 하면 정상적으로 동작은 하지만 찝찝하긴 합니다..
전 우선 임시조치 방법으로 전자를 택했습니다!! 이게 훨씬 깔끔하니까...
이번 일로 아무리 봐도 내가 짠 코드가 문제가 아니라면 github 이슈를 꼭 찾아보는 습관을 들여야겠다는 다짐을 했습니다.
github 이슈에 한번만 들어가봤어도 정말 손쉽게 임시조치를 할 수 있었을텐데
Nuxt와 Vercel의 환상의 쇼일줄은 꿈에도 몰라서 계속 작성한 코드에서 문제를 찾고 있었습니다.
그래도 이러면서 하나 더 배운거라고 생각이 들어서
