GitHub 릴리스 파일을 브라우저에서 CORS 오류 없이 다운로드하는 방법

분야

프로그래밍/소프트웨어 개발

대상자

웹 애플리케이션 개발자, 브라우저 기반 파일 다운로드 문제를 겪는 개발자

• 난이도: 중급~고급*

핵심 요약

• *CORS 오류 발생 원인**: GitHub 릴리스 URL은 S3 blob으로 리디렉션되며, 브라우저의 CORS 프리플라이트(OPTIONS 요청)가 리디렉션을 무시해 오류 발생
• *해결 방법**:
• 백엔드 중개 서버 사용: 브라우저에서 CORS 오류를 피하고, 서버가 리디렉션 및 헤더 처리
• CORS 프록시 설정: GitHub URL 전면에 프록시를 놓고, 리디렉션과 적절한 헤더 삽입
• *핵심 개념**:
• fetch() API, CORS 프리플라이트, S3 Blob, Access-Control-Allow-Origin 헤더, 라우팅 패턴

섹션별 세부 요약

1. CORS 오류 발생 원인

• GitHub 릴리스 URL은 S3 blob으로 리디렉션되며, 브라우저는 OPTIONS 요청을 처리하지 않아 오류 발생
• S3 파일 자체는 Access-Control-Allow-Origin 헤더를 포함하지 않아 브라우저가 파일 전달 거부
• GitHub 릴리이스 CDN은 브라우저 직접 다운로드에 적합하지 않음

2. 해결 방법: 백엔드 중개 서버 사용

• 서버가 요청을 중개해 리디렉션 처리 및 헤더 추가
• 예시 코드:

app.get("/asset", async (req, res) => {
  const upstream = await fetch(...);
  res.set("Content-Type", upstream.headers.get("content-type"));
  res.send(Buffer.from(await upstream.arrayBuffer()));
});

• 브라우저는 CORS 오류 없이 파일 다운로드 가능

3. 해결 방법: CORS 프록시 사용

• GitHub URL 전면에 프록시를 놓고, 리디렉션 및 헤더 처리
• 예시 코드:

fetch("https://github.com/.../download", {
  headers: { "Access-Control-Allow-Origin": "*" }
});

• 빠른 설정이 필요한 경우 프록시 사용 권장

결론

GitHub 릴리스 파일 다운로드 시 CORS 오류를 해결하려면 백엔드 중개 서버 또는 CORS 프록시를 사용해야 합니다.

• 백엔드 중개 서버는 전체 제어권을 제공하지만 복잡도가 높고, 프록시는 빠른 설정이 가능합니다.
• 실무에서는 서버 환경에 맞는 방법 선택이 중요하며, 프록시 사용 시 보안 설정을 철저히 검토해야 합니다.