프록시 설정이 안됩니다.

[한현진]

react 프로젝트 폴더에서 npm install http-proxy-middleware로 라이브러리 다운받고

src폴더 안에 setupProxy.js 파일 만들어서

const { createProxyMiddleware } = require("http-proxy-middleware"); 

module.exports = function (app) { 
    app.use( "/api", 
        createProxyMiddleware({ // proxy할 주소, 즉, 백단의 주소를 적어줍니다. 
            target: "http://localhost:8080", 
            changeOrigin: true, 
        }) 
    ); 
};

이 코드랑 똑같이 적어주고

app.js에서 axios로 get 할때 주소안에 '/api'만 적어줬는데

http://localhost:8080/api를 불러오지않고 게속 http://localhost:3000/api만 불러옵니다.

어떻게 해결해야하나요 구글링에는 이와 같은 사례가 없고
전부 cors 를 해결하기 위해 proxy를 쓴다는 글밖에 안보여서 해결책을 못찾고있습니다.

[한현진]

해결했습니다. 
서버에도 '/api' 로 get을 해줘야 비로소 통신이 되는 거군요
저는 서버엔 굳이 '/api' 로 get을 안해줘도 클라이언트단에서 프록시로 바뀐 주소를 확인 가능할 줄 알고
클라이언트 단에서 우선 3000포트가 아니라 8080포트로 가는지 확인했는데 다 삽질이였네요..
결국 서버단에서도 '/api'로 받아주는 주소가 있어야지 전환이된다는걸 늦게깨달았네요...ㅠㅠ

[글쓴이]

글