[Firebase] Firebase Storage 교차 출처 리소스 공유(CORS) 구성 방법

문제 상황

Firebase Storage에 저장된 이미지 파일읽어 들이는 Image.network 사용하여 web hosting 서버로 deploy 한 후에 Chrome에서 확인 해보았지만 이미지가 보이지 않고 아래와 같은 에러가 발생한것을 확인 할수있다.

Access to XMLHttpRequest at '...'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS policy로 인해서 접근이 block이 되었으며 가 무었이냐하면 아래와 같다.

 

CORS(Cross-Origin Resource Sharing)

- CORS 는 브라우저가 한 사이트가 다른 사이트의 리소스에 액세스하는 방법을 제어하는 ​​데 사용하는 메커니즘입니다. 기본적으로 하나의 웹 사이트가 XHR 또는 .NET을 사용하여 다른 사이트에 HTTP 요청을 할 수 없도록 설계되었습니다 fetch. 이렇게하면 다른 사이트의 스크립트가 사용자를 대신하여 권한없이 다른 사이트의 리소스에 액세스하는 것을 방지 할 수 있습니다.

 

- 사용하는 경우 <img>, <picture>또는 <canvas>픽셀, 브라우저가 자동으로 차단 액세스는 이미지가 다른 사이트와 데이터에 CORS 정책 것을 허용하지 접속에서 오는 것을 알고 때.

WebGL은 이미지를 렌더링 할 수 있으려면 이미지 데이터에 액세스해야합니다. 따라서 WebGL을 사용하여 렌더링 할 이미지는 애플리케이션을 제공하는 도메인과 함께 작동하도록 구성된 CORS 정책이있는 서버에서만 가져와야합니다.

 

결론적으로 아래와 같이 렌더링 할 이미지가 애플리케이션을 제공하는 도메인과 함께 작동하도록 구성된 CORS 정책이 있는 서버에서만 가져와야한다.

 

해결 방법

Firebase Storage에 CORS 설정 구성이 필요하며 아래와 같은 방법으로 설정이 필요하다.

 

- google_storage_cors.json 생성

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "responseHeader": ["Access-Control-Allow-Origin"],
    "maxAgeSeconds": 3600
  }
]

- gsutil cors json 파일 설정

$gsutil cors set google_storage_cors.json gs://[BUCKET_NAME]

- gsutil을 사용하여 CORS 설정을 시도하였지만 아래와 같이 Google Cloud SDK 인증 에러가 발생한다.

Your credentials are invalid. Please run
$ gcloud auth login

Google Cloud SDK 인증 절차를 정상적으로 진행하면 CORS 설정이 정상적으로 진행이 된다.

 

- CORS 구성 설정이 정상적으로 진행된지 확인을 위해서 아래와 같이 커맨드를 입력해보면 확인이 가능하다.

$gsutil cors get gs://[BUCKET_NAME]
[{"maxAgeSeconds": 3600, "method": ["GET"], "origin": ["*"], "responseHeader": ["Access-Control-Allow-Origin"]}]

 

- 위와 같이 설정이후에는 deploy된 web hosting 서버에서 Firebase Storage 이미지가 에러없이 정상적으로 나오는 것이 확인가능하다.

 

참고 문헌

flutter.dev/docs/development/platform-integration/web-images

Displaying images on the web

cloud.google.com/storage/docs/configuring-cors

교차 출처 리소스 공유(CORS) 구성  |  Cloud Storage  |  Google Cloud