1.mixed-content error
1) mixed content(혼합 콘텐츠)?
mixed content(혼합 콘텐츠)는 HTTP 콘텐츠와 HTTPS 콘텐츠가 함께 로드되는 것으로 크롬과 파이어폭스등 웹브라우저에서 안전상의 이유로 https 페이지에서 HTTPS가 아닌 HTTP 로 받아오는 리소스를 차단하고 있다.
2) mixed content 에러 원인
mixed-content 에러는 HTTPS 프로토콜을 사용하는 페이지에서 http에서 제공하는 데이터를 받아오려 했기 때문에 발생한다.
3) mixed-content 에러 해결 방법
검색을 통해 알아본 mixed content 에러 해결방법으로는 다음이 있었다.
① API를 HTTP가 아닌 HTTPS 프로토콜을 사용하도록 API 제공자가 수정
② 백엔드에서 API 데이터를 받아와 프론트엔드에 넘기기
③ META 태그를 헤더에 추가하여, http 콘텐츠를 자동으로 https로 변환하여 로딩하기
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> ①은 API 제공자가 해야하는 방법으로 내가 할 수 없고, ③을 시도했지만 오류가 해결되지는 않았다.
2. Node.js를 이용한 오류해결
프로젝트 상황
당시 프로젝트는 CRA를 통해 만든 react 프로젝트 였다.
1) 프로젝트에 node 서버 연결하기
🖱️"React+ Node(express) 연동" 에 대한 블로그 글 보러가기
2) 프로젝트를 cloudtype에 배포하기
🖱️cloudtype 에 node 배포하는 동영상 보러가기
3) cloudtype의 시크릿& 환경변수 활용
🖱️ 환경변수와 시크릿 설정에 대한 cloudtype 공식 문서 보러가기
⚠️ 환경변수 사용 시 주의할점
위의 세가지의 과정을 거치면 cloudtype에서 node서버를 배포하고, node 서버에서 react 프로젝트로 만든 dom을 만나볼 수 있는데 주의할 점은 cloudtype에서 설정한 환경변수는 프론트에서 접근할 수 없다는 것이다.
그래서 프론트에서 https에서 https로 요청을 보내 mixed-content의 에러가 나지 않은 요청들도 환경변수를 사용할 수 없게 되었기 때문에 이와 관련한 코드를도 서버에 요청을 보내면 서버가 해당 api 에서 데이터를 받아와 이를 프론트에 넘겨주는 방식으로 수정해주어야 했다.
만약 해당 요청들이 환경변수로 설정한 api key를 필요로 하지 않는다면 수정할 필요가 없다.
