Firebase Storage CORS 이슈

CORS란

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수있는 권한을 부여하도록 브라우저에 알려주는 것.

CORS 요청 상황

mdn에서 소개하는 상황이다.

• XMLHttpRequest와 Fetch API 호출.

• 웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시), so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.

• WebGL 텍스쳐.

• drawImage() (en-US)를 사용해 캔버스에 그린 이미지/비디오 프레임.

• 이미지로부터 추출하는 CSS Shapes. (en-US)

문제상황

Firebase Storage에서 나온 URL을 브라우저에서 fetch하여 변환하려고하면 CORS이슈가 나올 수 있다.

Google Cloud Platform 콘솔로 접속하여 Shell을 시작한다.

Storage의 CORS를 해결하기 위해서는 origin을 지정해줘야 하기에

cors.json 파일을 만들어준다.

[
  {
		 "origin": ["*"], // 원하는 도메인을 추가해줘도 된다.
		 "method": ["GET"],
		 "maxAgeSeconds": 3600
  }
]

마지막으로 cors.json을 명령어로 등록해준다.

(단, storage 버켓 주소의 경우 Firebase Console Storage에서 확인할 수 있다.)

$ gsutil cors set cors.json gs://{storage 버켓 주소}