[TIL] CORS 이슈 (proxy)

졸업 프로젝트를 하면서 로그인, 회원가입 페이지를 구현 해야 했다. 만만할줄 알았는데 굉장히 어려웠고 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 에서 몽고DB를 이용해 프론트, 백사이 서버통신이 어떻게 돌아가는지 조금이나마 이해중이다....!!

노드 js에서 백서버를 구축하였고, 프론트 단에서 axios를 이용해 request를 보내는 도중 이런 에러가 나온다.

현재 나의 백서버는 포트가 5000번, 클라이언트 서버는 포트가 3000에서 request를 보내는 상태

이렇게 두개의 다른 포트를 가지고 있는 서버는 아무 설정없이 request를 보낼수 없다!!! (CORS 정책에 의해) 보안적인 이슈 때문에 이런 이슈가 있다 한다.

domain-a.com 에서는 웹서버로 도메인이 같기 때문에 서로 교환이 가능하지만 (same origin) domain-b.com에 소통할때는 CORS 정책에 의해 컨트롤 당한다고 한다.

이런 문제를 해결하는 법은 여러 방법이 있는데 강의에선 Proxy로 해결 하였다.

yarn add http-proxy-middleware 로 라이브러리를 다운 받는다

다운을 받았다면 src폴더에 setupProxy.js 로 파일 하나 만들기

만들었다면 해당 파일에 코드를 작성해준다.

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

현재 프론트는 3000번 백서버가 5000번이므로 타겟을 5000번으로 주겠다는 의미

//./server/index.js

app.get("/api/hello", (req, res) => {
  res.send("hello");
});

서버에서 response로 hello 문자열 를 보내주었다.

//./client/LandingPage.js
useEffect(() => {
    axios.get("/api/hello").then((res) => console.log(res));
  }, []);

프론트에서 get을 통해 response를 받아옴

CORS 정책에 의한 오류가 뜨지 않고 데이터가 통신이 잘 되었다