😥Axios(error)
Spring과 React를 연결하는 과정에 404 에러가 발생하였다. 404 에러는 서버는 연결되어 있지만, 유효하지않은 URL을 요청하면 생기는 문제이다.
인터넷에서 검색해본 결과 웬만해서는 HTTP Method(GET, POST, PUT, DELETE)간의 문제(GET으로 요청했는데 POST로 받으려고 한다거나, 오타)일때가 많지만, 가끔 경로를 틀리게 적어 문제가 발생하는 경우가 많았다.
연결에 문제가 있을까 블로그에 올렸던 것처럼 리액트쪽 코드와 스프링쪽 코드를 글에 나왔던 것과 동일하게 만들었다. axios spring
하지만, 결과는 같았다. 프록시 설정도 미리 해두었기 때문에, 문제가 무엇인지 고민을 한참을 했다. 보면 요청 URL도 ~/api/test로 원하는 GET요청을 하고, 스프링에도 같은 요청을 받을 시 컨트롤러에서 처리하게 만들어두었지만, 해결이 되지 않았다.
🔧해결방안 1 (package.js)
현재 서버 api 요청 URL을 다양하게 할 수도 있다는 생각에 http-proxy-middleware를 활용해 setupProxy.js를 사용해 프록시 설정을 해두었었는데, package.js에서 직접 프록시 설정을 할 수 있었다는 기억이 났다. 한가지 경로에 대한 설정밖에 할 수 없어 하지 않았지만, 돌아가지않는 것보다 기능이 떨어져도 돌아가는게 중요하다고 생각했다.
이렇게 설정을 마치고, 실행해보았더니 해결이 되었다....
하지만, 원래 쓰던게 왜 되지않는 지 알아야한다는 생각이 들었고, 해결해보고자 했다.
🔧해결방안 2 (setupProxy.js)
404 에러이고, 오타가 없다면, 경로의 문제일 가능성이 크다! 라고 생각했기 때문에, 경로를 찾아 F12를 눌러 네트워크에서 확인해보았다.
test의 Response를 눌러보았을 때...
???? 왜 path가 /test이지? /api/test여야 하는데??
혹시...하고 스프링쪽 controller에서 /api/test가 아닌 /test에 대한 GET 처리를 하도록 처리해두고 다시 실행시켰다.
됐다... 이렇게 된다면 내 생각대로는 /api라는 url로 요청이 들어가게 되면, proxy는 http://localhost:8080으로 변하게 되는 것이고, /api/test는 ~/test가 되어버린 것이 였다는 결론이 나왔다.
http-proxy-middleware의 메인 설명을 확인해 보았고, 내 생각은 정답이였다. /api를 ~/api로 경로를 지정해주는 모습이다.
저번에 올렸던 포스팅에서는 잘 되었었는데...
proxy를 package.js에서 설정하고 저렇게 설정하니까 되었었나보다...
