[에러 해결] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

Node.js에 axios 요청을 보내는 통로를 proxy로 설정했습니다. React package.json에 "proxy" : "http://localhost:8080/" 형식으로 proxy를 지정해주고, 서버와 통신을 합니다. Git에 코드를 올려두고, 동료분이 클론한 다음 프로젝트를 실행하는데 아래 에러가 발생합니다.

 

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

 

 

 

에러 발생 원인

 

이 에러가 발생하는 이유는 Proxy가 연결할 서버를 찾지 못해서 인것으로 보입니다. 따라서 proxy 설정을 따로 해주는 작업이 필요해 보입니다.

에러 해결

 

Solution 1 

proxy를 설정해주기 위해서 http-proxy-middleware npm 모듈을 설치합니다.

$ npm install http-proxy-middleware

 

React src/ 디렉토리 아래에 setupProxy.js 파일을 생성하고 아래 코드를 작성합니다.

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

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

 

 

 

proxy 설정을 하는 다른 방법을 사용하는 것으로 해결이 가능합니다.

 

Solution 2

두번째 해결방법은 생각보다 간단합니다.

먼저 사용하고 있는 랜을 확인합니다. 유선 랜이라면 무선 랜을 사용해서 프로젝트를 다시 실행해봅니다. 개인적인 생각으로는 유선 랜으로 고정 IP를 받아와서 사용하는 경우 proxy 설정을 해주지 못하는 것으로 보입니다.

무선 랜으로 연결 후 프로젝트를 진행하면 React에 설정한 "proxy" : "http://localhost:8080/" 형식으로 설정한 proxy 설정이 적용되고, 프로젝트가 정상적으로 실행됩니다.

 

 

 

우분투 포트 죽이기 (열린 포트 확인하기)

 

[Blockchain] Web3란?

 

[Blockchain] ERC-721 구조?