HTTPS net::err_cert_common_name_invalid 오류 해결

프론트 페이지에서 백엔드 서버 API를 호출했는데 엣지 브라우저에서는 API 결과가 반환됐지만, 크롬이나 모바일에서는 계속 안전하지 않은 페이지라면서
net::err_cert_common_name_invalid라는 에러가 떴다.

처음 겪어보는 에러라서 한참 헤매다가 원인을 알게 됐다.

net::err_cert_common_name_invalid 오류는

웹 사이트의 서버가 제공하는 SSL/TLS 인증서가 사용자가 브라우저에 입력한 도메인 이름과 일치하지 않을 때 발생한다.

HTTPS 프로토콜을 적용하는 과정에 문제가 생긴 것 같았다.
다만, SSL 인증서를 확인해봐도 도메인 주소를 비롯한 설정값은 정상적으로 적혀있었다.

우선, 프론트에서 API를 어떤 식으로 호출하는지 확인할 필요가 있을 거 같아서 개발자도구로 자세히 확인해봤다.

API 요청이 EC2의 Public IP로 가고 있었다.
API 요청이 도메인 주소로 가는 게 아니라 EC2 IP로 가고 있었다..!
이게 문제인거 같아서 프론트분께 도메인 주소로 요청을 보내달라고 해봤다.

그랬더니 해결이 됐다.

검색을 해보니 내가 사용했던 Let's encrypt에서는 IP주소에 대해서는 HTTPS를 발급해주지 않는 것 같다. 그래서 인증서 내용대로하면 IP주소는 맞지 않으니까 계속 에러가 떴던 게 아닐까 하고 생각한다.