[React] npm start, Proxy관련 오류

오류

여느날과 같이 npm start를 입력하는 중....갑자기 아래와 같은 에러가 발생했습니다.....

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
options.allowedHosts[0] should be a non-empty string

검색해보니 등록해놓은 Proxy 설정에 문제가 있다는 것을 알게되었습니다 !

packge.js에 "proxy" : "http://localhost:8889"를 지우면 다시 작동된다는 것을 알게되었고, 삭제한 이후 다시 실행했더니 정상적으로 작동하였습니다 !

그럼 Proxy 설정은 어디에서 해야되는지 찾아봤다 !

 

해결방법

http-proxy-middleware를 사용하여 Proxy를 설정할 수 있습니다 !

npm install http-proxy-middleware

src 디렉토리 안에 setupProxy.js파일을 생성해줍니다.

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

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


};

위와 같이 파일을 생성한 뒤 다시 npm start 하면 ! 정상적으로 설정이 된 것을 확인하실 수 있습니다 !

'/notice', '/mypage' 두 url을 호출할 때 제가 작성해 놓은 포트:8889로 설정해 놓았지만 각자 원하는 포트번호로 호출할 수 있습니다 changeOrigin은 호스트 헤더를 target URL로 변경하는 옵션이라고 합니다. Default는 false입니다.

 

아직 오류가 발생한 이유를 정확하게 모르지만 빠르게 파악해서 업데이트 하도록 하겠습니다 :)