http 요청시 Mixed Content 에러

This request has been blocked; the content must be served over HTTPS.

프로젝트

📝 PM 프로젝트 Day02

• gh-pages로 배포 이후, Mixed Content 에러가 발생함.
• axios.get() 으로 http 요청을 했기 때문.
• gh-pages로 배포한 url은 https인데, 요청한 API는 http이기 때문에

📌 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)

• 한 출처에서 실행 중인 웹 애플리케이션이
  다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

해결 방법

meta 태그 추가

• http -> https로 변경해주는 메타태그를 추가함.
• 만약 해당 API 서버에 https 주소가 없다면, 이 방법이 통하지 않는다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

http로 배포

• 마찬가지로 좋은 방법은 아님.

SSL 인증서 발급

• 과정이 복잡

1. 사이트에서 개인키(Private Key)를 생성.
2. 사이트의 정보가 담긴 인증 서명 요청서(CSR)를 작성.
3. CSR을 인증기관(CA)로 전송하여 인증서(CRT) 발급을 요청.
4. 해당 인증기관에서는 신청서의 내용을 토대로 사이트를 검증.

내가 선택한 방법

Backend에서 http 요청

• node.js 로 백엔드에서 http를 요청한 후, 데이터를 받아옴.
• 받아온 데이터를 프론트엔드 단에서 api 호출하여 RESTapi로 구현할 것.