Choorai
KO EN
HTTPS 보안 차단

Mixed Content 차단 해결하기

HTTPS 페이지에서 HTTP API/이미지/스크립트를 호출하면 브라우저가 요청을 차단합니다. 배포 환경의 URL 스킴을 https://로 일치시켜야 합니다.

TL;DR (핵심 요약)

1) API/리소스 URL에서 http:// 제거 2) 환경변수와 리다이렉트 경로 확인 3) 브라우저 콘솔 Mixed Content 경고가 사라졌는지 검증

주의

Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

원인

HTTPS 문서에서 HTTP 자원을 불러와 브라우저 보안 정책에 의해 요청이 차단되었습니다.

해결책
  1. 프론트엔드/백엔드 URL을 모두 HTTPS로 통일
  2. 환경변수(VITE_API_URL 등)에 http://가 남아 있는지 확인
  3. CDN 이미지/스크립트 링크도 HTTPS로 교체
  4. 배포 후 브라우저 캐시를 비우고 재검증

실무 점검 순서

1) 환경변수 URL 확인

.env.production
# Wrong
VITE_API_URL=http://api.example.com

# Correct
VITE_API_URL=https://api.example.com

2) 코드 내 하드코딩 URL 제거

api.ts
// Wrong
fetch('http://api.example.com/users')

// Correct
fetch(import.meta.env.VITE_API_URL + '/users')

주의

Cloudflare/Vercel 프록시를 쓰더라도 원본 호출 URL이 HTTP면 브라우저에서 먼저 차단됩니다. 백엔드가 HTTPS를 직접 제공하거나 올바르게 프록시되어야 합니다.

Prerequisites

  • 프론트엔드 서비스가 HTTPS로 배포되어 있어야 합니다.
  • API 호출 URL 또는 정적 리소스 URL을 확인할 수 있어야 합니다.
  • 브라우저 콘솔의 Mixed Content 경고를 확인할 수 있어야 합니다.

Validation

  1. HTTPS 페이지에서 호출하는 모든 API/리소스 URL이 HTTPS입니다.
  2. 브라우저 콘솔에 Mixed Content 경고가 더 이상 나타나지 않습니다.
  3. 네트워크 탭에서 차단된 요청 없이 2xx 응답이 정상 확인됩니다.

Troubleshooting

  • 환경변수의 API URL이 http://로 남아 있지 않은지 확인하세요.
  • 리다이렉트 중간 경로에서 HTTP로 내려가는 구간이 없는지 점검하세요.
  • 이미지/스크립트/CDN 링크도 전부 HTTPS로 통일하세요.

References

관련 문서

Failed to fetch

네트워크 원인 분리 점검

SSL 인증서 오류

HTTPS 인증서 관련 문제

마지막 업데이트: 2026년 2월 22일 · 버전: v0.0.1

피드백 보내기

입력한 내용으로 새 이슈 페이지를 엽니다.

GitHub 이슈로 보내기