리액트 yarn start시 proxy 에러 해결 방법

ERROR

 

스프링부트와 리액트를 연동하기 위해 proxy를 설정하던 중 오류가 발생했다.

다른 블로그들을 보면서 이런식으로  package.json에서 proxy를 설정한 뒤 

 

 

저장하고 yarn start를 해서 서버를 구동시키려는데 터미널에서 다음과 같은 오류가 떴다.

 

"Invalid options object. Dev Server has been initialized using an options object that does not match the API schema."

 

 

 

 

 

 

SOLUTION

 

이런 경우 당황하지 말고 터미널 켜서 http-proxy-middleware를 깔아보자

npm install http-proxy-middleware

그리고 src폴더 밑에 setupProxy.js라는 파일을 만들고 아래처럼 적는다.

 

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

module.exports = function (app) {
    app.use(
        '/',
        createProxyMiddleware({
            target: 'http://localhost:8080',
            changeOrigin: true,
        })
    );
};

 

target에 본인이 proxy를 설정하려고 했던 포트를 넣으면 된다.

나는 스프링부트 프로젝트와 리액트를 연계하는게 목적이었기 때문에 그 플젝에서 쓰고 있는 포트를 연결했다.

 

 

그리고 저장 후 yarn install 한번 해준 뒤 yarn start를 하면

 

성공 메세지가 잘 뜬다!