Next.JS CORS 문제 (rewrites not work)

1Jui.ce·2023년 2월 13일
1

원인은 나도 모르겠다 ㅠㅠ
아무리 찾아도 나와 같은 경우의 사람이 전혀 없어보인다... 무엇이 문제일까,, 혹시 내가 똑같은 현상을 겪을걸 대비해서 적는다!

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가 안뜨기에 해결은 되었다.

이게 정말 맞는 방법인가,,? 남들은 그냥 이 과정 안거치고도 해결하던데,,,ㅠㅠ

profile
옷에 기름기 닦는 사람

1개의 댓글

comment-user-thumbnail
2024년 1월 27일

저랑 같은 문제를 겪으셨는데 해결하셨나요?
저는 stackoverflow를 찾던 도중 서버 사이드에서 API를 호출할 경우 전체 URL을 넘겨줘야 인식할 수 있다는 답변 글을 보고 해결했습니다.
본 글의 getPredict 함수가 서버 사이드에서 실행된다면, 호출 url 부분을 명시적으로 작성해야 하므로 에러가 나지 않았을까 싶습니다.
클라이언트 컴포넌트에서 호출되는 경우만 rewrite가 적용되어 프록시로 넘어가는 것 같아요!

답글 달기