HTTP와 HTTPS 간 API 호출 시 동작 정리 (Mixed Content 중심)

웹 개발하다가 자주 마주치는 Mixed Content 문제와 HTTP/HTTPS 간 API 호출(예: fetch, axios, XMLHttpRequest) 가능 여부를 정리해 봤습니다. 특히 HTTPS가 기본이 된 요즘, 이 부분을 모르면 배포 후에 콘솔 에러로 골치 아프죠.

---

Mixed Content란?

• Mixed Content는 HTTPS(보안) 페이지에서 HTTP(비보안) 리소스를 불러올 때 발생하는 보안 문제입니다.
• 브라우저(크롬, 파이어폭스 등)는 사용자를 보호하기 위해 HTTPS 페이지 → HTTP 리소스 요청을 기본적으로 차단합니다.
• 리소스 종류에 따라
  • Passive Mixed Content: 이미지, 비디오, 오디오 등 → 경고만 뜨고 일부 허용될 수 있음
  • Active Mixed Content: 스크립트, CSS, fetch/XHR(API 호출) 등 → 강하게 차단 (대부분 blocked)

API 호출은 Active Mixed Content에 해당하므로 거의 항상 차단됩니다.

HTTP ↔ HTTPS API 호출 가능 여부 요약

페이지 프로토콜	API 프로토콜	가능 여부	이유 및 비고
HTTP	HTTP	가능	동일 프로토콜, 문제 없음 (CORS만 맞으면 OK)
HTTP	HTTPS	가능	보안 업그레이드 → 브라우저가 허용
HTTPS	HTTPS	가능	완전 보안 연결
HTTPS	HTTP	불가능 (차단)	Mixed Content 정책으로 브라우저가 차단 콘솔 에러: Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been blocked;

상세 설명 및 예시

1. HTTP 페이지에서 HTTPS API 호출 → 가능
   • 로컬 개발 환에서 외부 HTTPS API(예: 공공데이터포털, 카카오 API)를 호출할 때 흔히 발생.
   • 브라우저가 "더 안전한 방향"으로 요청하므로 허용합니다.

   // HTTP 페이지에서 실행 가능
   fetch('https://api.example.com/data')
     .then(res => res.json())
     .then(data => console.log(data));

2. HTTPS 페이지에서 HTTP API 호출 → 불가능
   • 배포 환경(Netlify, Vercel, GitHub Pages 등)에서 자주 발생.
   • HTTPS 페이지가 보안 연결인데, 중간에 비보안 HTTP로 데이터를 주고받으면 중간자 공격(MITM) 위험이 있으므로 브라우저가 막습니다.

   // HTTPS 페이지에서 실행 시 차단됨
   fetch('http://api.example.com/data')  // Blocked!
     .catch(err => console.error('Mixed Content Error'));

해결 방법 (실무에서 자주 쓰는 순)

1. 최선: API 서버도 HTTPS로 변경
   • Let's Encrypt 무료 인증서로 쉽게 적용 가능.
   • 모든 리소스를 HTTPS로 통일하는 것이 가장 안전합니다.
2. 프록시 서버 사용 (개발/운영 공통)
   • 프론트엔드 서버(Vite, Nginx, Vercel Serverless 등)에서 HTTP API를 대신 호출해 HTTPS로 응답.
   • 예: Vite 개발 서버 proxy 설정

     // vite.config.js
     export default {
       server: {
         proxy: {
           '/api': {
             target: 'http://legacy-api.com',
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, '')
           }
         }
       }
     }

3. 메타 태그로 downgrade 허용 (임시, 비추천)

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

   • HTTP 요청을 자동으로 HTTPS로 업그레이드 시도하지만, 대상 API가 HTTPS를 지원하지 않으면 실패.
4. CORS와 혼동 주의
   • CORS는 "다른 도메인" 간 요청을 제어하는 정책 (프로토콜도 포함).
   • Mixed Content는 "프로토콜 다운그레이드"를 막는 정책.
   • HTTPS → HTTP는 Mixed Content가 먼저 차단하므로 CORS 설정해도 소용없습니다.

마무리

• 요즘은 거의 모든 서비스가 HTTPS를 기본으로 하니, 가능하면 모든 API를 HTTPS로 맞추는 게 최고입니다.
• 로컬 개발은 HTTP로 편하지만, 배포 전에 반드시 HTTPS 환경에서 테스트하세요!