[React] CORS 이슈 - Proxy 이용하여 해결하기

toy project로 단순 게시판을 구현해보고 있다.

(view - react + typescript, server - spring + jpa)

개발을 하다보면 자주 보이는 CORS 이슈.

 

CORS란 무엇인가?

 

에러를 그대로 읽어보자면

http://localhost:3000 에서 (origin)

http://localhost:8070/api/product 로 요청한 것이 CORS policy에 의해 막혔다는 말이다.

 

CORS 이슈를 해결하기 위한 많은 방법이 있지만

이번에는 Proxy 를 이용한 방법을 써보기로 했다.

 

우선 http-proxy-middleware 를 설치해준다.

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

 

설치가 완료되면
src/setupProxy.js 파일을 생성하여 아래와 같이 작성한다.

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

module.exports = function(app) {
  app.use(
    '/api', // 불러오려는 server 의 api path
    createProxyMiddleware({
      target: 'http://localhost:8070', // server 주소를 넣어주면 된다.
      changeOrigin: true,
    })
  );
};

 

그리고 view 에서 직접 호출하던 주소를 바꿔준다

// 기존(http://localhost:8070/api/product) -> 수정(/api/product).

  _getProduct = async() => {
    Axios.get('/api/product', {
    }).then((res)=>{
      console.log(res)
    })
  }

 

잘 불러오는 것을 확인 할 수 있다.

 

 

** 참고한 사이트

create-react-app.dev/docs/proxying-api-requests-in-development/

lowell-dev.tistory.com/51

hannut91.github.io/blogs/infra/cors