[React] "npm start"오류 options.allowedHosts[0] should be a non-empty string.

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.

 

첫 협업 프로젝트를 진행하면서 깃을 통해 프로젝트를 관리하다, 어느 순간부터 프론트엔드 리액트 프로젝트 폴더 경로에서 npm start 명령을 실행했을 경우, 위와 같은 메세지가 뜨기 시작했다. 

가상환경을 통해 8000번 포트의 Django 서버를 실행해둔 상태이고, package.json에 "proxy" : "http://localhost:8000" 또한 작성해둔 상태이다.. 원인은 모르겠지만 일단 해결이 급해 구글을 찾아보았다. 

해결책을 구글링으로 찾아보니, package.json의 proxy 설정을 지우고 http-proxy-middleware 패키지를 설치한 다음, setupProxy.js 파일을 프로젝트의 src 폴더 혹은 루트 폴더에 작성하라고 한다.... 코드는 아래와 같다.

 

npm install http-proxy-middleware --save

//setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

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

target에 들어갈 주소같은 경우, 각자 프로젝트에서 사용하는 서버 주소를 입력하면 된다..

이 방법외의 다양한 시도들은 아래 링크에서 확인할 수 있다. 

https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object