원인은 나도 모르겠다 ㅠㅠ
아무리 찾아도 나와 같은 경우의 사람이 전혀 없어보인다... 무엇이 문제일까,, 혹시 내가 똑같은 현상을 겪을걸 대비해서 적는다!
environment : Next.JS V13
CORS 문제 해결은 보통 프록시 서버를 사용하는데 방법은 next.config.js
rewrites
을 적어 해결한다.
설명하자면, source
: 이 주소가 입력되었을 때, destination
: 여기로 보내줄게!
라는 뜻이다!
이렇게 이제 fetch
하게 되면 /api/:path*
를 찾았으니 로컬:5000/:path*
로 보내 주려나 싶더니 ㅠㅠ 오류 발생,,,
error - unhandledRejection: TypeError: Failed to parse URL from /api/predict/ㅜㅜ웨안뒈
실패하셨데~
진짜 엄청 찾아보다 아무리 찾아도 내 경우는 없었다.. 아무래도 분명 있을텐데 검색어 문제일 것이고 내가 이 부분을 잘모른다는 것이겠지..?
해결방법은 이게 정법인지는 모르겠으나 공유하겠다!
http://localhost:3000/
을 추가해주는 것이다.. 진짜! 혹시나 해서 해봤는데 되어버렸다.. 결국 프록시 서버를 거치는 것이고, CORS Error가 안뜨기에 해결은 되었다.
이게 정말 맞는 방법인가,,? 남들은 그냥 이 과정 안거치고도 해결하던데,,,ㅠㅠ
저랑 같은 문제를 겪으셨는데 해결하셨나요?
저는 stackoverflow를 찾던 도중 서버 사이드에서 API를 호출할 경우 전체 URL을 넘겨줘야 인식할 수 있다는 답변 글을 보고 해결했습니다.
본 글의 getPredict 함수가 서버 사이드에서 실행된다면, 호출 url 부분을 명시적으로 작성해야 하므로 에러가 나지 않았을까 싶습니다.
클라이언트 컴포넌트에서 호출되는 경우만 rewrite가 적용되어 프록시로 넘어가는 것 같아요!