R2 파일 다운로드 버그

CORS(Cross-Origin Resource Sharing)와 다운로드 링크 버그

웹 개발을 하다 보면, 한 도메인에서 다른 도메인의 리소스를 요청해야 할 때가 많습니다. 그러나 보안상의 이유로 브라우저는 동일 출처 정책(Same-Origin Policy)을 적용하여 교차 출처 요청을 제한합니다. 이로 인해 CORS(Cross-Origin Resource Sharing)라는 메커니즘을 활용하여 이러한 제한을 풀 수 있습니다.

문제 상황

최근 프로젝트에서 A 도메인에서 B 도메인의 리소스를 다운로드하려는 상황이 발생했습니다. 사용자는 A 도메인의 웹 페이지에 있는 다운로드 버튼을 클릭하여 B 도메인의 파일을 다운로드하려고 했습니다. 그러나 CORS 정책 때문에 파일이 정상적으로 다운로드되지 않고, 브라우저 콘솔에 CORS 오류 메시지가 나타났습니다

CORS(Cross-Origin Resource Sharing)란 무엇인가?

웹 개발을 하다 보면, 종종 한 도메인의 웹 페이지에서 다른 도메인의 리소스를 요청해야 하는 상황이 발생합니다. 이때 보안상의 이유로 브라우저는 동일 출처 정책(Same-Origin Policy)을 적용하여 교차 출처 요청을 제한합니다. 여기서 동일 출처 정책이란, 문서나 스크립트가 자신의 출처와 다른 출처의 리소스에 접근하는 것을 막는 보안 기능입니다.

하지만 실제 웹 애플리케이션 개발에서는 이러한 제한을 풀어야 할 필요가 종종 있습니다. 예를 들어, 프론트엔드 애플리케이션이 다른 도메인의 API와 통신해야 하는 경우가 그렇습니다. 이 문제를 해결하기 위해 등장한 것이 바로 CORS(Cross-Origin Resource Sharing)입니다.

 

 

참고: download는 동일출처 URL과 blob: data: 스킴에서만 작동합니다람쥐

Blob이란?

Blob은 "Binary Large Object"의 약자로, 이미지, 사운드, 비디오 등과 같은 멀티미디어 데이터를 포함할 수 있는 대용량 이진 데이터 덩어리를 의미합니다. JavaScript에서 Blob 객체는 파일과 유사한 데이터 객체로, 텍스트나 이진 데이터를 담을 수 있습니다. Blob 객체는 다음과 같은 특징을 가지고 있습니다:

• 크기와 유형: Blob 객체는 데이터의 크기와 MIME 유형을 포함합니다.
• 읽기 전용: Blob 객체는 생성된 후에는 수정할 수 없습니다.
• 부분 사용 가능: Blob 객체의 데이터 중 일부를 사용할 수 있습니다. 예를 들어, 파일의 특정 부분을 읽을 수 있습니다.
•  

Blob 객체는 File API의 일부분으로, 파일을 생성하거나 조작할 때 유용하게 사용됩니다.

 

Blob을 통한 해결 방법

CORS 설정을 서버에서 조정하는 것이 항상 가능한 것은 아닙니다. 이런 경우, 클라이언트 측에서 문제를 해결할 수 있는 방법 중 하나가 Blob을 사용하는 것입니다. Blob을 사용하면 서버에서 파일을 가져와 브라우저에서 다운로드 링크를 생성할 수 있습니다.

다음은 Blob을 통해 CORS 문제를 해결한 코드 예제입니다:

 

Cloudflare R2에서 CORS 설정

위와 같은 방법을 사용해도 CORS 오류가 계속 발생할 수 있습니다. 이 경우 서버에서 CORS 정책을 올바르게 설정해야 합니다. Cloudflare R2를 사용하는 경우, R2의 CORS 설정을 통해 특정 도메인에서의 접근을 허용할 수 있습니다.

Cloudflare R2에서 CORS 설정을 하는 방법은 다음과 같습니다:

1. Cloudflare 대시보드에 로그인: Cloudflare 계정에 로그인하고 R2 서비스를 선택합니다.
2. 버킷 선택: CORS 설정을 적용할 버킷을 선택합니다.
3. CORS 설정 추가: CORS 설정 페이지에서 허용할 도메인(예: https://example.com)을 추가합니다. 예를 들어, 다음과 같이 설정할 수 있습니다: 

이런식으로 적용할 사이트의 도메인을 등록해주면 됩니다  -끝-