GitHub 릴리스 에셋 다운로드 시 CORS 오류 해결 방안: 백엔드 릴레이 또는 CORS 프록시 활용

GitHub 릴리스 에셋 다운로드 시 CORS 오류 해결 방안

핵심 기술: 웹 애플리케이션에서 GitHub 릴리스 에셋(ZIP, PNG 등)을 직접 다운로드할 때 발생하는 CORS(Cross-Origin Resource Sharing) 오류의 근본 원인을 분석하고, 이를 해결하기 위한 두 가지 실용적인 방법을 제시합니다.

기술적 세부사항:

• CORS 오류 발생 원인:
  • GitHub 릴리스 다운로드 URL은 실제 파일이 아닌 S3 버킷으로의 302 리디렉션입니다.
  • 브라우저는 CORS 사전 요청(OPTIONS 요청) 시 리디렉션을 따르지 않아 오류가 발생합니다.
  • S3 파일 자체는 Access-Control-Allow-Origin 헤더를 보내지 않아 브라우저에서 접근이 차단됩니다.
  • 결론적으로 GitHub 릴리스 CDN은 직접적인 브라우저 Fetch 요청에 최적화되어 있지 않습니다.
• 해결 방법 1: 백엔드 릴레이 (Backend Relay):
  • 자체 서버(Express 예시)를 통해 GitHub URL로 요청을 중계합니다.
  • 서버는 리디렉션을 추적하고, 최종 파일의 Content-Type 헤더를 설정합니다.
  • 프론트엔드는 백엔드의 릴레이 엔드포인트로 요청하여 CORS 문제를 우회합니다.
• 해결 방법 2: CORS 프록시 (CORS Proxy):
  • 서버가 없는 경우, GitHub URL 앞에 CORS 프록시를 추가하여 사용합니다.
  • 프록시는 리디렉션을 처리하고 필요한 헤더를 주입합니다.

개발 임팩트:

• 브라우저에서 GitHub 릴리스 에셋을 안정적으로 다운로드할 수 있습니다.
• 프론트엔드 개발자가 보안 제약사항을 이해하고 해결책을 적용할 수 있도록 돕습니다.
• 애플리케이션의 기능 확장성을 높이고 사용자 경험을 개선합니다.

커뮤니티 반응:

• 이 문제는 웹 개발자들 사이에서 자주 발생하는 일반적인 이슈이며, 백엔드 릴레이나 CORS 프록시 사용은 널리 알려진 해결책입니다.