http-proxy-middleware 라이브러리(cors 에러)

대부분 개발을 하다보면 cors에러를 접해보게 될 것이다. 이 에러는 백엔드, 프론트엔드에서 모두 해결이 가능하다. 나는 프론트엔드에서 해결할 수 있는 방법을 소개하겠다. 하지만 이 방법은 proxy 방법이라 배포하면 백엔드쪽에서 cors에러를 잡아줘야 한다.

proxy

브라우저에서 다른 도메인 서버로 요청을 보내면 cors 에러가 난다. 하지만 서버에서 서버로 보내면 cors 에러가 안난다. 이렇게 서버에서 서버로 보내는 것이 proxy이다.

 

-경로

브라우저 -> 프론트 서버 -> 백엔드 서버

http-proxy-middleware

프론트엔드에서 cors 에러를 해결하기 위해서는 http-proxy-middleware 라이브러리를 사용하면 된다.

사용법

src 폴더에 setupProxy.js 파일을 만든다.

 

-setupProxy.js

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

module.exports = (app) => {
  app.use(
    '/proxy',
    createProxyMiddleware({
      target: '연동하고자 하는 서버 주소',
      changeOrigin: true,
    })
  );
};

이 코드를 넣어주면 된다. target에는 연동할 서버 주소를 넣어주면 된다.

 

-axios로 연동하기

  const postUser = (url, data) => {
    axios
      .post('/user/login', data, {
        withCredentials: true,
      })
  };

axios에서 url을 써줄 때 앞에 도메인을 적지 않아도된다. 이렇게 하면 cors에러가 해결된다!

출처

https://junhyunny.github.io/information/react/react-proxy/

React 개발 서버 CORS 해결하기 with Proxy

이 블로그가 해결하는데 많은 도움이 되었습니다.