[React] CRA 프로젝트에서 Proxy 설정 오류로 인한 데이터 불러오기 실패

 

프론트엔드(3000 포트)에서 fetch() 메소드를 사용하여 백엔드 API 서버(3090 포트)에 있는 데이터를 가져오고 조작하기 위해 pacakge.json에 proxy 속성을 추가했다.

 

client 터미널과 server 터미널로 분할하여 yarn start를 입력하고, 프론트엔드와 백엔드를 모두 가동시켰다.

 

그랬더니 오류가 발생했다. 그러나 이 당시엔 알지 못했다.

내가 이 오류 하나 때문에 한나절 이상의 시간을 보내게 될 줄은...

 

발생한 오류는 다음과 같다.

 

(프로젝트 경로)\client>yarn startyarn run v1.22.22warning ....\package.json: No license field$ react-scripts startInvalid 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.error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

나는 이 오류의 근원과 해결책을 찾아다니기 위해 각종 LLM 모델들과 수많은 설전을 치르고, 인터넷을 돌아다니며 급기야는 메인 모니터의 밝기를 60에서 20으로 낮추기까지에 이르렀다.

 

그러나 오류의 근본적인 원인은 해결 방법을 알아낸 현 시점까지도 완전히 파악하지 못했다.

그러니 해결 방법을 찾아내기가 쉬울 리 만무하다

 

 

내가 시도해본 방법은 다음과 같다.

1. node_modules 및 yarn.lock 삭제 후 yarn 재설치 (효과 없었음)
2. react-scripts 다운그레이드 (근본적인 원인을 해결해주지도 못하거니와, 다른 오류들이 더불어 발생했음.)
3. http-proxy-middleware 사용 (분명히 target에 'http://localhost:3090'을 명시했음에도, API 서버와 연결하지 못하고 프론트엔드인 3000 포트에 요청을 보냈음.)
4. 이외에도 상기 이미지와 같이 여러 방법들이 제시되었고, 또 시도해보았으나 아무 것도 효과가 없었음.

 

애초에 proxy 설정을 package.json에 작성하기 전까지는 모든 것이 정상 작동 되었으므로, 나는 이것이 안 된다면 왜 안 되는지 알아내는 것이 중요하다고 생각했다. 그러나 어떤 곳에서도 이 오류에 대해 명쾌한 설명을 제시하지 못했다.

(누군가 해답을 알고 게신다면 자료를 제시해 달라.)

 

정신적인 스트레스와 신체의 피로도가 극에 달해 모니터를 초전박살내기 직전,

나는 보았다. 내 간절한 기도에 주님께서 응답하셨음을.

 

 

결론부터 말하자면 해결 방법은 다음과 같았다.

 

 

1. client 폴더에 .env 파일을 생성한다.
2. .env 파일에 다음과 같이 작성한다.
    (DANGEROUSLY_DISABLE_HOST_CHECK=true)
3. 저장 후 client를 run한다.

 

 

또는 다음 방법도 해결책이 된다고 한다.

 

 

 

 

원인 분석

 

 

 

GPT가 해준 답변 중 1, 2, 5번은 나에게 해당이 없다.

이미 알고 있거나 시도해본 방법들이었기 때문이다.

 

3번 답변은 솔직히 귀에 걸면 귀걸이, 코에 걸면 코걸이같은 답변이고, 의문을 전혀 해소해주지 못하므로 패스.

 

4번 답변이 일리가 있었다.

 

필자의 경우 Hamachi와 Radmin VPN이 데스크탑에 설치돼 있다.

그리고 이는 Host 헤더를 바꿀 수 있다고 한다.

 

여기서 잠깐, [DANGEROUSLY_DISABLE_HOST_CHECK=true]는 무엇일까?

먼저, React에 내장된 개발 서버는 webpack-dev-server를 사용한다.

이 서버는 자신에게 들어오는 HTTP 요청의 Host 헤더를 검사한다.

 

DANGEROUSLY_DISABLE_HOST_CHECK=true는 호스트 검사를 비활성화하는 코드이다.

 

따라서, 예상컨대 내 컴퓨터에 설치된 VPN 프로그램으로 인하여 Host 헤더 내용이 바뀌었고, 이 때문에 알맞게 proxy 설정을 완료하였음에도 API 서버와 통신하지 못했던 게 아닐까 싶다. 

 

상기 명령어를 통해 Host 검사를 완전히 OFF시키고 나니, 데이터 작업이 정상적으로 이루어지는 것을 확인할 수 있었다.

 

 

그러나 수박 겉핡기 식으로 추측할 뿐이지, 아직까지 명확하게 원인을 규정하지도 못했고, 그런 글을 보지도 못했다.

다음은 이 오류 현상에 대해서 제일 납득이 되어지는 글이다.

 

이제 막 개발 걸음마를 뗀 입장으로서는 무슨 말을 하는지도 잘 모르겠지만, 어쨌거나 proxy의 작동 원리를 자세히 파헤쳐야 대략적으로나마 원인 파악이 가능할 것 같았다.

 

 

상기 스택 오버플로우 이미지들의 출처는 다음과 같다.

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

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

 

다양한 의견들이 많이 제시돼 있으니 참고하시기 바란다.