ask-resume-front

ask-resume-front copied to clipboard

Implement

SSR 또는 SSG에서 data를 request할 때 TSL 에러가 발생한다. Axios의 base url에 api 경로가 잘 적용되고 있다.

아래는 에러 메세지이다.

  cause: Error: unable to verify the first certificate
      at TLSSocket.onConnectSecure (node:_tls_wrap:1540:34)
      at TLSSocket.emit (node:events:513:28)
      at TLSSocket._finishInit (node:_tls_wrap:959:8)
      at ssl.onhandshakedone (node:_tls_wrap:743:12)
      at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'
  },
  page: '/en/form'
}

반면 SSG 또는 SSR로 렌더링 후 CSR로 data를 fetching할 때는 에러가 발생하지 않는다. 즉 Node.js에서 data를 fetch할 때 에러가 발생하는 것이다.

그렇다면 왜 서버에서 data를 request할 때 인증서 오류가 나는가?

해당 이슈는 스택오버 플로우에 올라온 이슈와 비슷한 맥락같아 보인다.

If the service has a public SSL cert, the https.Agent usually does not need to be configured further because your operating system provides a common set of publicly trusted CA certs.

This is usually the same set of CA certs your browser is configured to use and is why a default axios client can hit https://google.com/ with little fuss.

서비스에 공용 SSL 인증서가 있는 경우 운영 체제가 공개적으로 신뢰할 수 있는 CA 인증서의 공통 집합을 제공하므로 일반적으로 https.Agent를 추가로 구성할 필요가 없습니다. 

이것은 일반적으로 브라우저가 사용하도록 구성된 동일한 CA 인증서 세트이며 기본 axios 클라이언트가 약간의 소란 없이 https://google.com에 도달할 수 있는 이유입니다.

SSR, SSG에서는 에러가 발생하지 않고 CSR에서는 잘 받아와지는것이 이상하지만, 인증서 업데이트를 함으로써 해결할 수 있을지도 모르겠다.