브라우저(3000번)에서 서버(5000번)으로 axios.get 요청을 보낼때 proxy를 사용했음에도 해당주소로 get 할 수가 없습니다.(404)

Question

프론트엔드를 공부하고 있습니다.로그인 폼을 만들면서 브라우저에서 서버로 axios.get 요청을 보내는데 서로 포트가 달라 (브라우저 3000번, 서버 5000번) pakage.json에서 proxy로 브라우저가 5000번으로 접근할 수 있게 해준 후, axios.get 요청을 보냈습니다. 그런데 404에러가 나면서 안된다고 하네요.. 제가 서버쪽은 처음 다뤄보는 거라서 실수가 많습니다. 구름ide라는 브라우저 개발환경을 사용하는데 보통은 클라이언트쪽을 코딩하고 실제 웹창을 띄우면 localhost:3000/api/hello 뭐 이렇게 뜬다면 브라우저 개발환경은 웹 주소가 https://nodereactlogin-yqvpb.run.goorm.io/api/hello 이렇게 떠서 제대로 맞는 포트를 사용하는지도 헷갈리네요..(그래도 터미널에서 브라우저랑 서버 둘다 실행하고 각 포트 3000, 5000 사용하는것 확인했습니다) 결론은 브라우저에서 노드로 axios.get 하는데 proxy로 포트를 같게 했슴에도 axios.get 요청이 전달되지 않습니다. 404에러가 뜨면서 주소를 찾을 수 없다고 하네요. 제가 이해한 바로는 위 LandingPage.js(루트주소 /, 라우터로 지정해줬음) 일때 바로 useEffect로 서버에 /get/hello 접근요청이 되고 proxy를 설정해줬으므로 정상적으로 request요청이 가서서버부분인 index.js에서 브라우저가 5000번 포트의 /api/hello 주소로 접근 요청을 해서 다시 res.send로 response를 보내주면 결국 브라우저에서 .then(response &#61;> console.log(response.data) 가 실행되면서 콘솔창에 &#34;Hello World~&#34;가 떠야하지 않나요?? 그런데 이렇게 콘솔창에 출력이 되지않고 404에러만 뜹니다 프론트-백엔드 소통을 공부하는게 처음이라 많이 헤메이네요. 사람 하나 구해주신다 생각해주시고 알려주시면 정말 감사하겠습니다ㅠㅠ. 몇시간째 구글링중인데 이해가 안가는건지 제대로 된 답을 찾기가 어렵네요..

SonicSAN · Answer

요청 url에 문제가 없다면 서버 문제 아닐까요?

포커스릿 · Answer

해결습니다~~ 감사합니다 ㅎㅎ

진현서현진 · Answer

어떻게 해결하셨나요???

브라우저(3000번)에서 서버(5000번)으로 axios.get 요청을 보낼때 proxy를 사용했음에도 해당주소로 get 할 수가 없습니다.(404)

3개의 답변

#axios.get 목록