webpack proxy 설정 에러 해결방법..

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

 

package.json

  "proxy":"http://localhost:3080/"

 

cra로 구축한 프로젝트에서는 package.json에서 proxy 프로퍼티를 추가해주는 것만으로도 간단하게 개발환경에서 프록시 서버를 운용할 수 있습니다.

하지만 제 환경의 경우 위와같이 invalid options이라며 개발서버가 시작되지 못했습니다.

처음엔 문법의 문제인가 싶어 여러가지 문법들을 적용해보았습니다.

 

package.json

   "devServer":{
    "proxy":{
      "/api":{
        "target": "http://localhost:3080",
        "changeOrigin": true
      }
    }
  }

proxy를 바로 사용한것이 문제인가 싶어

devServer의 프로퍼티 형태로 전달해주었습니다.

invalid한 옵션이라는 에러는 발생하지 않았지만

요청이 3080으로가는것이 아니라 client 서버를 기준으로 전송되는 현상이 발생했습니다.

 

webpack.config.js

module.exports = {
    devServer: {
        proxy:{
            '/':"http://localhost:3080",
        }
    }
}

package.json에서 시도하는것의 문제가 있을까 싶어

package.json에서의 설정을 없애고

wepback.config.js파일을 루트에 생성한 뒤 프록시 설정을 주었습니다.

하지만 동일하게 client 서버를 기준으로 전송되는 현상이 발생했습니다.

---

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

그러다보니 브라우저 콘솔창에서 위와같은 에러가 발생했습니다.

 

잘 살펴보면 !DOCTYPE은 HTML 파일의 시작점이 되는 문자입니다.

아무래도 JSON이 아닌 HTML 파일을 응답받고 있는 것이 아닌가라는 의심이 들었고

 

network창을 확인해본 결과 예상대로였습니다.

사실 api서버로 요청을 보내는게 아니라 리액트가 돌아가고있는 개발서버에 요청을 보내고있으니

당연하게도 위와 같은 결과가 나오는 것이었습니다.

 

그렇다면 왜 그런것일까요?

이전 vite을 활용하여 설정했을때에는 문제가 없었던것으로 미루어보아

웹팩의 문제일것이라 예상했습니다.

 

구글링하던 중 비슷한 에러를 겪고 해결한 포스트를 발견했습니다.

https://velog.io/@black-pepper/Invalid-options-object.-Dev-Server-has-been-initialized-using-an-options-object-that-does-not-match-the-API-schema

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

한번 더 출처를 찾아가보면 스택오버플로우의 답변이 있었습니다.

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

요약하면 다음과 같습니다.

프록시 설정이 안되는 이유는 CRA의 버그 혹은 보안을 위한 기능으로 예상되며

환경변수를 지정해주면 해결된다는 내용입니다.

.env 파일을 생성한 후 안내해주는것처럼

DANGEROUSLY_DISABLE_HOST_CHECK=true

를 설정해주겠습니다.

DANGEROUSLY_DISABLE_HOST_CHECK=true

 

저는 이 방법으로 해결되었지만

스택오버플로우를 참고해본 결과 node.js 18 version 이상부터 해당 에러가 발생하는 등

여러가지 요인으로 인하여 프록시 서버가 정상적으로 구동되지 않을 수 있는것으로 보입니다.

 

따라서 위 방법으로 해결이 되지 않으시는 경우

node , 라이브러리들의 버전을 다운그레이드 하는 것도 고려해보시는 것이 좋을 듯 합니다.

 

---

cors 에러를 해결하는 방법은

여러가지가 있을 수 있지만 위와같이 proxy 서버를 운용하는 방법

혹은 cors와 관련된 헤더를 설정하는 방법 등이 있을 수 있습니다.