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

React - Spring 연동 시 Proxy 설정

프록시란?
프록시(Proxy)는 "대리"의 의미로, 인터넷과 관련해서 쓰이는 경우, 특히 내부 네트워크에서 인터넷 접속을 할 때에, 빠른 액세스나 안전한 통신등을 확보하기 위한 중계서버를 "프록시 서버"라고 일컫는다. 클라이언트와 Web서버의 중간에 위치하고 있어, 대신 통신을 받아 주는 것이 프록시 서버이다.

 

왜 해야하는가?
리액트의  기본 Port 넘버는 3000번, Spring은 8080번으로 서로 다르기 때문이다.
CORS 문제가 생기므로 프록시 설정 필수.

 

 

package.json에 아래와 같이 추가( 나같은 경우는 아래처럼 추가해도 안됐다..)

"proxy": "http://localhost:8080"

 

원인(추측): 지금 이 문제는 proxy 때문이 아니라, webpack dev server 설정 문제일 확률이 높음.
(React, Webpack 버전 올라가면서 옵션 엄격해짐)

 

🛠️ 해결방법 1.

 

1. project/front/node_modules/package-lock.json 삭제

rm -rf node_modules package-lock.json

 

2. 다시 의존성 설치

npm install

 

3. 그리고 다시 npm start

 

🛠️ 해결방법 2.

project/front/src/setupProxy.js 파일을 따로 만든후 아래와 같이 코드 추가

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

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

이렇게 하면 React 서버가 /api로 들어오는 요청을 Spring Boot(8080) 으로 프록시해준다.

(이 방법은 package.json에 "proxy" 필요 없음)

 

 

방법2로 해결 완료..!