react & django | Mixed Content ERR

Kubernetes 환경에 React App과 Django DRF로 만든 테스트 컨테이너를 배포하여 연동해보고자 하였음.

컨테이너 이미지를 만들고 배포까지 하였으나 호출이 되지 않는 문제가 발생.

오류 발생

테스트 환경에서는 호출이 잘 되는 것을 확인했는데 이상하게 컨테이너 배포후 불러오지 못하는 현상 발견.

오류 원인

Chrome DevTools의 Network를 열어서 에러가 나는 지점을 찾고 Console에 출력되는 메세지를 확인 하였다.

DRF.js:13 Mixed Content: The page at 'https://www.example.com/test' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '${http://django-drf로 주고 받는 컨테이너 내부 fqdn/}'. This request has been blocked; the content must be served over HTTPS.

오류 처리

React
public > index.html에서 사이에 아래 코드를 추가한다.

다른 오류 발견

그래도 안된다...원인은 잘 모르겠으나 일단 크롬 에러에서 확인시 http로 백엔드 통신이되야되는데 계속해서 https로 통신을 시도하는 것을 발견하였다.

오류 해결

Ingress-controller로 배포되어있고 현재 구조가 리버스 프록시로 되어있어 내부에는 https설정을 하기가 좀 번거로웠다. 따라서 그냥 Ingress에 라우팅을 넣어서 해결하였다.